[Resolved] Problem Page Product with Mobile Google Chrome and Safari, no FireFox

[Olivier]

Hi
For all products page i have the same problem, and i don’t find a solution…
I have the product on “two columns” only with the mobile Google Chrome and mobile Safari.
The configuration is OK and all WP + plugins are update.

Can you help me ?

Thank you

https://ibb.co/r4K66J2
https://ibb.co/Sy55Wbm
https://ibb.co/jVLCYgH

[Tom]

Hi there,

It looks like the mobile stylesheet for WooCommerce is missing. Can you try disabling WP Rocket to see if it’s causing the issue?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Olivier]

Hi Tom
Perfect ! It’s WP Rocket.
I search the just configuration for this web site !
Thank you 🙂
Have a nice day

[Olivier]

I must desactive this option for mobile to see perfect, only for Chrome/Safari Mobile !!?? : https://ibb.co/7t02CL7
It’s strange…

[CCL Live]

you can add this in the css:

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

and activate wp-rocket for mobile, it worked for me !

[Olivier]

Thank CCL Live, but this solution don’t work for me 🙁

Tom, i must contact WP Rocket Support or have you a solution with CSS ?

Thank you

[David]

Hi there,

it would be best to raise the issue with WP Rocket as its there plugin that is causing the issue.

You can of course try forcing the columns with some CSS like so:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Olivier]

Thank you David OK, i contact the support WP Rocket.
But this CSS don’t change the style, i have the same problem.

[David]

Where did you add the CSS?
Could re-add it and clear your cache. Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Olivier]

Is on CHILD and Apparence directly for test to : https://ibb.co/0ZvNx8C
I have clear all cache.

[Tom]

You may need to use a child theme style.css or our “Simple CSS” plugin to add it. Looks like the Customizer needs to be updated to allow some CSS Grid attributes.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Olivier]

Yes Tom I have just test in Apparence.
it’s in my Child Theme 🙂
But nothing change

[Olivier]

Hi
This is an option of WP Rocket the trouble : “Optimiser le chargement du CSS”
I must desactive this and it’s work 🙂

Thank you for your help.

Have a nice day

[Tom]

Glad you got it sorted 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts