Ondersteuning » Thema en CSS/opmaak » 2 producten per kolom in categorieën op mobile devices

  • Opgelost annatimmers

    (@annatimmers)


    Hallo,

    Op mobile devices laat mijn webshop maar 1 product naast elkaar zien, terwijl ik graag zou willen dat er 2 producten naast elkaar staan. Ik heb al veel CSS codes geprobeerd. Deze werken echter niet, omdat mijn producten in een categorie staan en niet op een “pagina”. Weet iemand een oplossing voor dit probleem?

    Alvast bedankt!

    Groetjes,
    Anna

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

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Guido

    (@guido07111975)

    Hoi Anna,

    Het is alleen 1 product per rij in een vrij klein scherm (480 pixels breed of minder). De CSS-code (layout) hiervan is niet heel eenvoudig aan te passen.

    Guido

    Thread starter annatimmers

    (@annatimmers)

    Hallo Guido,

    Bedankt voor uw reactie! Is er een manier waarop ik ervoor kan zorgen dat het scherm op mobile devices groter word dan 480 pixels?

    Groetjes,

    Anna

    Guido

    (@guido07111975)

    Hoi,

    Dat is onderdeel van de WooCommerce Blocks plugin die je gebruikt.

    Voeg dit eens toe op pagina Extra CSS van de Customizer in je dashboard:

    @media screen and (max-width:480px) {
    	.wc-block-grid.has-2-columns .wc-block-grid__products {display:flex;}
    	.wc-block-grid.has-2-columns .wc-block-grid__product {flex: 1 0 50%; margin-left:0; margin-right:0; max-width:50%;}
    }

    Als het goed is worden er nu 2 producten in een rij getoond in klein scherm.

    Guido

    Thread starter annatimmers

    (@annatimmers)

    Hai,

    Heel erg bedankt! Er staan nu inderdaad 2 producten per kolom.

    Groetjes,

    Anna

    Guido

    (@guido07111975)

    Graag gedaan 🙂

    Guido

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)