[Resolved] Woocommerce products in mobile half screen layout with Elementor

Home Forums Support Woocommerce products in mobile half screen layout with Elementor

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1488202
    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!

    #1488328
    David
    Staff
    Customer Support

    Hi there,

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

    #1488336
    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

    #1488351
    David
    Staff
    Customer Support

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

    #1488355
    Isaac
    #1488759
    David
    Staff
    Customer Support

    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%;
        }
    }
    #1488797
    Isaac

    That works! Thank you very much David

    #1488817
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.