products display not responsive on mobile devices

[Nick]

Hi there!
With the premium versions woocommerce element/module activated the thumbnails of products are a little bit bigger on mobile devices making the website not fully responsive/fitting on smaller smartphones such as iPhone 4, 5, 6, etc.

Any way we can fix this?

Thank you in advance.

Regards,
Nick

[David]

Hi there,

you can change the columns on mobile here:

https://docs.generatepress.com/article/woocommerce-overview/#shop

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

[Nick]

Hi there,

I still do not get why 2 in a row is fine when i use Generate press’s free version but not when i use the woocommerce module/element of the premium version?
Seems a bit odd, why are the thumbnails a different size when i use the premium version?

Regards,

[David]

The Woocommerce module changes the layout over to CSS Grid which is what allows the Column # and Column Gaps to be changed.

You should be able to achieve the same layout by reducing the Column Gap.

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

[Nick]

Ok, sorry to ask but could you provide me with this (i assume it is CSS?)? Since i have absolutally no idea where and how to do this (also because it is the first time i use Generate Press Premium and i would like to purchase more licenses but i do not want “issues” everytime so saving this settings/CSS would help me a lot).

[David]

CSS shouldn’t be required.
Go to Customizer > Layout > Woocommerce you’ll see:

Once you select the mobile icon you can reduce the Column gap. Around 10 – 15px should do it.

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

[Nick]

Great! that works perfect! Thank you very much 🙂

[David]

You’re welcome

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

[Author]

Posts