Woocommerce products in mobile half screen layout with Elementor

[Isaac]

Hi there,

First of all, thanks for your support and the development of this wonderful theme.

I’m experiencing an issue on mobile view working with Elementor Pro and Woocommerce. If you go to my main page you can see a couple of products in 2 columns inside a 2 columns layout. In mobile view I want these 2 products to cover the 100% of the screen but they don’t, they appear in 1 column covering 50% of the screen, on the left side. Same happens in the “Cursos” page, but I got this same design in the product page and there everything looks good everywhere.

While working on the design in my computer everything is working as it should, and the preview of Elementor is correct. Also, If I use the tools of Chrome to check the mobile view, again everything looks fine, but when I go to real mobiles this 2 products are placed on the 50% left side of the screen.

If I uncheck the Woocommerce option in GeneratePress Premium, everything works fine but then I loose some functionality that I would like to keep.

Hope you can help me. Thanks!

[David]

Hi there,

in Customizer > Layout > Woocommerce – what happens if you set the columns to 1 – theres options for Desktop, Tablet and Mobile

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

[Isaac]

Hi David,

Thanks for your answer. I already did it, and actually in the preview area every looks great, but then when I check on the mobile, it is still half screen. I also clean caché before to check.

HERE you can check how I see everything

[David]

Can you link me to a page where i can see the issue ?

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

[Isaac]

Main Page – https://www.staging2.centralaudiovisual.com/
Pictures – https://www.dropbox.com/sh/g9v6elvjf7x2umo/AACAchfBMrDij4mFtIXf1nPpa?dl=0

[David]

So Elementor is controlling the single column output. But it looks like they neglected to overwrite the Woocommerce plugin CSS that defines the width of those columns.

Try adding this CSS to overwrite that:

@media only screen and (max-width: 768px) {
    .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product {
        width: 100%;
    }
}

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

[Isaac]

That works! Thank you very much David

[David]

You’re welcome

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

[Author]

Posts