[Resolved] 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

[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 ?

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

[Isaac]

That works! Thank you very much David

[David]

You’re welcome

[Paul]

David,

I am experiencing the same issues that are described in this thread. I tried the solution that you recommended, but it has no effect.

You can view the problem on our website
https://www.sandandsteelfitness.com/

If you want me to create a technical assistance request, I can certainly do so.

-Paul

[David]

Hi there,

i am not seeing that issue on the URL provided ? – did you fix it ?

[Paul]

No I haven’t fixed it. Here’s what it looks like right now on Chrome and Safari on an iPhone
Images on IOS

I appreciate your help on this!!!!

-Paul

[Ying]

Hi Paul,

Can you try adding this CSS?

.products .product .wc-product-image .inside-wc-product-image {
    width: 100%;
}

If it doesn’t work, can you open a new topic? Let me know 🙂

[Paul]

I will check on this code. I tried something similar before, but hopefully this does the trick. I’ll report back shortly. Thank you.

[Ying]

No Problem, keep us updated!

[Paul]

Just wanted to let you know and anyone who might read this thread that Ying’s suggestion worked. Thank you!

[Author]

Posts