[Support request] woocommerce shortcode goes not for 1 column in mobile

[Heinrich]

hi team,

a woocommerce shortcode is accepting the columns setting from the customizer, but only for desktop and not for mobile. desktop setting is 3 columns, is working fine, tablet = 2 columns, also fine but mobile is 1 column, but showing two columns?

any hint?

[Fernando]

Hi Heinrich,

The HTML structure created from the WooCommerce shortcode is different, thus, making the code generated from the customizer settings inapplicable to it.

If you’d like to display these products in one Column, here is a CSS you may try adding to Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .gb-inside-container .woocommerce ul.products li.product {
    width: 100%; 
    }
}

Hope this helps! Kindly let us know how it goes. 🙂

[Heinrich]

mhhhh…. white screen of death with this code?

[Fernando]

May we know where you added this?

Adding CSS in Appearance > Customize > Additional CSS shouldn’t cause a white screen.

Example: https://share.getcloudapp.com/QwuL4vJ0

Adding the specific CSS above should result in something like this: https://share.getcloudapp.com/7KuQq4NO

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

As mentioned, adding this through additional CSS should work.

Kindly let us know how it goes. 🙂

[Heinrich]

Hi Fernando, code snippet is in common use for that

[Heinrich]

Mhhh sorry, it’s to early in the morning…. Got it

[Fernando]

Glad you got it to work! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts