[Support request] Breakdown size for mobile

[CCL Live]

Hello,

I’ve an issue with mobile display of woocommerce section.
For example, on this page: https://www.location-gopro.com/dev/categorie-produit/fixations/, i have on my mobile 4 products on the same line and one is out of the screen ! I would like to have only 2 products on each line.
Where can I change the mobile breakdown size?
Per advance, thank you

Thibault

[CCL Live]

found the issue
it’s coming from WP Rocket

[David]

OK – is the issue now resolved ?

[CCL Live]

I just checked again and it don’t work anymore !

I added in the CSS:

@media (max-width: 767px) {
.generate-columns {
padding-left: 0 !important;
}
}

It has worked for few moment but not anymore

I would like to activate the mobile cache on WP Rocket because i got better page speed insight results on mobile.

Thank you

[David]

WP Rocket is messing with the CSS, i would suggest you raise a support ticket with them.
In the meantime try this CSS to force the 4 columns to appear as 2:

@media(max-width: 768px) {
    .woocommerce .wc-columns-container.wc-columns-4 .products {
        -ms-grid-columns: (1fr)[2] !important;
        grid-template-columns: repeat(2,1fr) !important;;
    }
}

[CCL Live]

Thank you for the new CSS.
I just add it and seems to work.

For the single product, i would like to display everything on one column (title then pictures then text).
It’s actually on two columns: picture on the left, text on the right.

Do you have any idea?
Per advance, thank you

[David]

It would be better if you spoke to WP Rocket support and asked them how to fix the problem, otherwise we are possibly creating issues for the future.

[CCL Live]

ok thank you i’m opening a ticket
keep you in touch

[CCL Live]

i just desactivated “optimize css loading” and seems to work but the speed insight score is worst

[David]

The issue generally happens when CSS is Optimized ( combined or minified ). WP Rocket should be able to help eliminate that.

Its also worth checking what is the real world speed difference – Better Pagespeed Insights scores do not necessarily mean it loads faster.

[Author]

Posts