Products per row (@media queries)

  • Hi,

    I’m trying to get the woocommerce shop page to display;

    3 products per row on Desktop
    2 products per row on Tablet
    1 product per row on Mobile

    All rows centered on page

    Not sure if this needs to be done in PHP or CSS using media queries, I’ve no idea how to achieve this.

    Please help!

Viewing 16 replies (of 16 total)

  • It looks like the products on this page are setup in Visual Composer at 3 per row, presumably using the shortcode [products ids=””]?

    The first row with the 3 shoes is setup differently to the others – it looks like the row stretch setting is “stretch row with content” and the for the other rows the setting is just “stretch”.

    You’re not going to be able to get the products to flow out of one VC row into the next. You’ll either get 2 and then one, then a row break, or 3 x one per row within a VC row.

    I should try having all the products in one VC row using one product shortcode with all 9 ids. There will be 3 rows of products per row – within a VC row, and the products can flow within the VC row as the viewport shrinks for mobile. If you could set up a VC row like that, maybe on a test page, I can take a look.

Viewing 16 replies (of 16 total)
  • The topic ‘Products per row (@media queries)’ is closed to new replies.