Breakdown size for mobile

found the issue
it's coming from WP Rocket

OK - is the issue now resolved ?

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

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;;
    }
}

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

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.

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

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

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.