Product Archive Page Problem – not all images-text are centered on mobile phone

  • Resolved vortexdizajn

    (@vortexdizajn)


    3 years ago

    Hello, we are using your plugin ShopEngine and we are really satisfied with it. We have a problem with the website that we are working for the client (jb-srebro.com), so please help us.

    The problem is when the site is viewed via mobile phone on the “product archive page” (“Prodavnica subcategory”). Product images are not all centered, nor is the text as it should be. Every fourth image is somehow stretched from the rest, and that really destroys the concept of the website.

    We looked at all the possible options, but we couldn’t find a solution to that problem (WordPress, Astra Theme, all plugins are updated). Is it a problem on your end, so it needs an update? or is it ours end? Please help us to solve the problem because it is urgent. Thanks in advance.

    Website url: https://jb-srebro.com/
    Screenshot: https://privatebin.support-tools.com/?bb41cfe643b49ad5#SdMGdZt4wgbGSOBbjNz2s5OXCG0UicrEgjlpRM39AnU=

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Prosenjit Barman

    (@prosenjitbarman)

    Hi @vortexdizajn,
    Hope you are doing well.

    I have checked your mentioned link from mobile devices and am able to trace the issue. Every fourth Product card is somehow getting stretched. I noticed that the CSS files of your site are minified by a plugin. Which can be a reason behind this issue.

    However, it is possible to solve the problem by applying CSS. Please copy the CSS code from below and paste it to the Appearance > Customize > Additional CSS section.

    @media (max-width: 767px){
    .shopengine-widget .shopengine-archive-products .products.columns-4 .product:nth- 
    child(4n) {
        margin-right: 20px !important;
    }
}

    Let me know if that helps.

    Best Regards,
    Prosenjit

    Thread Starter vortexdizajn

    (@vortexdizajn)

    Hello, @prosenjitbarman

    we tried and added the CSS code as you mentioned, but unfortunately, it didn’t solve the problem. Still, every fourth image is somehow stretched from the others (as you can see on the website).

    What could be the problem and how to solve this? Please help us, thanks in advance.

    Screenshot: https://privatebin.support-tools.com/?f25510df44c26387#8mCNo61oaoAL3Lgh+0fcJYK4Hs7w7n05yU674cpHJfI=

    Benjir Ahmed

    (@benjirahmed)

    Hey @vortexdizajn ,

    It seems Woocommerce’s CSS for specific device (screenshot) is giving 20px margin for the whole archive products widget’s in single product list layout but not for the forth product. To solve the issue please use below CSS which I have tested in your website also and it’s working.

    @media (max-width: 767px){
    .shopengine-archive-products .products .product {
        margin-right: 20px !important;
    }
}

    Regards,
    Benjir

    Thread Starter vortexdizajn

    (@vortexdizajn)

    Hello, @benjirahmed

    We applied that new CSS code and now everything is as it should be. Thank you so much for your help, great customer support. We are looking forward to new ShopEngine updates.

    Have a nice day, best regards.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Product Archive Page Problem – not all images-text are centered on mobile phone’ is closed to new replies.