Vary shop columns by displayport width

  • Resolved bushal

    (@bushal)


    6 years, 10 months ago

    Hi all,

    I have created a Storefront child theme and i am trying to change the number of product columns in the shop depending on the display width.
    I am happy to insert media queries with nth-child for the various sizes but something in the main theme is forcing a clear both every 5 columns regardless and i cannot see what is doing that.
    So if 3 columns are active the first row shows 3, the second 2, then three again
    Any help on how best to do this would be very gratefully received. as i am starting to squint reading the browser inspector.
    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hi @bushal – I’m going to have to be the bringer of bad news, that’s going to be very tricky to do.

    The reason why: the number of items per column is added with PHP, and the styling is done with CSS (displaying all items below each other is easier to do because you’re just using CSS to display all items of each row below instead of next to each other).

    If you want to still give it a try, here’s what I would suggest:

    With PHP, choose to display all products in 1 row.

    Then using something like flex-slider or CSS grid, would probably allow you to format that.

    I chatted to some of our designers and they did confirm that this would be a very tricky thing to custom code.

    Thread Starter bushal

    (@bushal)

    Thanks – I will give that a go

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Vary shop columns by displayport width’ is closed to new replies.

Tags