Support » CSS / opmaak vragen » Weird white gaps between products on mobile

  • jameskarsten

    (@jameskarsten)


    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)
  • 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)