Site logo

Archived topic

WooCommerce products outside screen - mobile.

34 replies · Started by Fredrik on August 15, 2019

Viewing posts 31–35 of 35

No difference.

Just a reminder that this code you gave me worked. But since then there were patches that should have fixed it if I recall correctly.

body.woocommerce .wc-columns-container.wc-columns-3 .products {
    grid-template-columns: repeat(3,minmax(0, 1fr));
}

Altough I used it as 2 columns under a breakpoint, and the !important was needed, else it didn't work.

body.woocommerce .wc-columns-container.wc-columns-3 .products {
    grid-template-columns: repeat(2,minmax(0, 1fr)) !important;
} 

It looks like the minmax part of it didn't make it into our update for some reason - that's my fault, sorry!

I'll definitely get that added in 1.10.

Great! :)

Hi Tom + Team,
just want to add to this:
I have the same problem on my site and I have the columns on mobile set to 1.
Tablet 2 columns, PC 3 columns.
When resizing on a PC it all looks fine but on mobile I have 3 columns and a scrollbar to reach them.
I will wait for the 1.10 update and see if it fixes that and if I have to add some of the CSS you mentioned.
Just wanted to add that it isn't just with Fredriks' site, but with mine too.
For your reference site is here

Hi Sebastian,

This almost looks like a different issue - the one column isn't working at all. Any chance you can open up a new topic?

Thanks!

This archived topic is closed to new replies.