Support » Plugin: WooCommerce » Porduct Gallery Widget only shows pictures in 50% on mobile

  • Resolved luckyluke44

    (@luckyluke44)


    Hi Guys,

    I’m preparing the website for a social entrepreneurship project at the moment, and I’m facing a problem with mobile optimization (I’m using Elementor and WooCommerce):

    On the page I linked, I would like to show 3 products in a row on PCs and 2 products in a row using a smartphone. I already edited that in Elementor and the preview looks perfect for mobile and PC. But once I open the website on a real smartphone, the products are only visible in half of the size – just like a four products row where every second spot is empty. Hope this is understandable 😀

    Could you guys help with that? I already found out that there could be a CSS solution, but I didn’t manage to write the correct code for that.

    Thank you so much in advance!
    Best wishes
    Lukas

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Joash (a11n)

    (@joashrajin)

    Hi there @luckyluke44 👋

    I see what you mean. The issue is happening due to the 48% width which is being applied to the Product Grid for screen sizes 768px and smaller: https://d.pr/i/Vf6JAO

    To fix this, you can use the following Custom CSS code:

    @media (max-width: 768px) {
    body .woocommerce ul.products[class*=columns-] li.product {
        width: auto;
    }
    }

    This code will change the width from 48% to auto. If the code is getting overridden, you can change width: auto; to width: auto !important;

    I also recommend that you get in touch with Elementor about this. They should be able to find the root cause of the problem since something seems to be conflicting with the styling here.

    Hope this helps!

    Thread Starter luckyluke44

    (@luckyluke44)

    Hi @joashrajin

    IT WORKED! Thank you sou much – you literally saved our campaign! 🙂
    Also, thanks a lot for your explanation – it’ll be a long way to learn all these codes etc. but people like you make it so much easier for me.

    Have an awesome day!
    Lukas

    Plugin Support abwaita a11n

    (@abwaita)

    You’re welcome, Lukas!

    Glad to hear @joashrajin’s CSS was helpful.

    Feel free to create a new thread if you have any other questions.

    Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.