Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Product images on frontpage not responsive like before

Home Forums Support [Resolved] Product images on frontpage not responsive like before

Home Forums Support Product images on frontpage not responsive like before

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

    #198782
    Tom
    Lead Developer
    Lead Developer

    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 5 years, 6 months ago by Tom.
    • This reply was modified 5 years, 6 months ago by Tom.
    #198790
    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

    #198906
    Tom
    Lead Developer
    Lead Developer

    Ah sorry about that – I just adjusted the code above πŸ™‚

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

    #199071
    Tom
    Lead Developer
    Lead Developer

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

    Let me know πŸ™‚

    #199088
    Vincent

    Hi Tom,

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

    Best regards,
    Vincent

    #199191
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.