[Resolved] Product images on frontpage not responsive like before

[Vincent]

Hi,

Hope you are well, I have a question regarding the front page of my webshop, on which I have displayed several products in rows of four. Here’s the URL: http://tinyurl.com/je62bxf

Untill recently, if I made the browser screen smaller, the four images of products would scale down untill they were too small to fit in a row of four. If I made the browser window even smaller, the images would then become a row of 2 and stay responsive. Now, however, when I scale down the width of the browser window (or look on a smartphone), I just see 1 realy big image instead of two in a row. The 1 big image is still responsive though, I just don’t understand why it doesn’t scale down to a row of 2 first.

I can’t find out what is causing this problem, I’ve displayed the products like this for almost a year and this has always worked fine for me. I display the product images by using shortcode for Woocommerce:
[products ids=”51, 48, 53, 44″ orderby=”id” order=”desc”]

Could you please help me out and see what is causing this problem?
I thank you in advance for your time and help, if you need anymore information please let me know.

Best regards,
Vincent

[Tom]

After a few requests I decided to make the WooCommerce columns 100% wide on mobile devices – they were 50% before.

It looks for most, but doesn’t look like it’s works for your images.

You can revert back to two columns with this code:

@media (max-width: 768px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product, 
    .woocommerce-page[class*=columns-] ul.products li.product,
    .woocommerce[class*=columns-] ul.products li.product {
        width: 48%;
        float: left;
        clear: both;
        margin: 0 1% 2.992em;
    }
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

Let me know if you need more info 🙂

• This reply was modified 6 years, 10 months ago by Tom.
• This reply was modified 6 years, 10 months ago by Tom.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Vincent]

Hi Tom,

Great! Thank you for your quick reply, I appreciate you still have the same level of excellent support like last year when I spoke to you for the last time!

I’ve added the code in Simple CSS and the coloms are 50% again.
But now there is no padding between the images anymore. Do I need to add the padding in the code that you sent to me?

Thanks in advance!

Best regards,
Vincent

[Tom]

Ah sorry about that – I just adjusted the code above 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Vincent]

Hi Tom,

On one website with a similar setup, it works great: http://tinyurl.com/hmf8n59
On the initial site that I sent to you, the fix doesn’t seem to be working: http://tinyurl.com/je62bxf

I’ve deleted the cache and refreshed the page F5, but still the product images have no padding.
Do you need the rest of the code that I’ve used in simple CSS to see what’s going on?

Best regards,
Vincent

[Tom]

Sorry about that! I just made another adjustment that should do it.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Vincent]

Hi Tom,

That looks right again, thank you very much for your help!
Greatly appreciated!

Best regards,
Vincent

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts