Weird white gaps between products on mobile

  • jameskarsten

    (@jameskarsten)


    3 jaren, 8 maanden geleden

    Hello Everyone,

    I have these weird white gaps between products on my mobile screen.
    https://i.postimg.cc/BQGDY0zd/IMG-2494-1.png

    I tried to find the problem with css but I couldn’t solve it.
    You can only see the gaps on your mobile phone, the problem doesn’t appear in element inspect (responsive).

    Does anyone know what might be wrong? Thanks in advance.

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

1 reactie aan het bekijken (van in totaal 1)
  • Ruurd de Wind

    (@geoclaps)

    3 jaren, 8 maanden geleden

    Hoi James, dit is het Nederlandstalige forum. De voertaal is hier dus Nederlands.

    Je probleem heeft te maken met dat sommige DIV elementen een variabele hoogte hebben waardoor ze doorlopen in de rij eronder waardoor deze DIV’s naar de verolgende kolom verpringen. Dit kun je oplossen door bijvoorbeeld in de mobiele view de kolommen een vaste hoogte te geven met een overflow ‘hidden’.

    Voorbeeld CSS:

    @media (max-width: 768px) {
    ul.products li.product .product-list-item {
        min-height: 360px;
        overflow: hidden;
    }
}
1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Weird white gaps between products on mobile’ is gesloten voor nieuwe reacties.