Pictures clumping

  • elbybrown

    (@elbybrown)


    5 years, 7 months ago

    Hi there,

    I have a problem with my pictures clumping in my shop. After testing by changing themes it seems it is a virtue theme problem rather than a woo commerce issue.

    So, over the last few days I have noticed when I have added pictures they merge together in my shop. If I refresh the page sometimes it resolves the issue. My browser seems fine now (I restored a back up after changing the theme as it got really bad). However, checking my site on my mobile two pictures all remain lumped together no matter how many times I refresh. It also seems to get worse if I put new items on.

    So, wondering if there a fix for this? Please bear in mind I am not a website developer and am a bit of a novice so any really easy to follow advice would be much appreciated.

    Thanks very much.
    Laura B

    Any

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Kevin

    (@jx-3p)

    5 years, 7 months ago

    Hello,

    I’m seeing the images display properly. Can you share a screenshot of what you’re seeing?

    You can host images here:
    https://postimages.org/

    -Kevin

    Thread Starter elbybrown

    (@elbybrown)

    5 years, 7 months ago

    Hey Kevin @jx-3p
    Sure.
    Thanks for the host site link
    https://postimg.cc/image/tby4luxez/17d0492d/

    This is on my phone.
    Sometimes it does it on my browser as well, usually if I have uploaded a new thing. Its like it sends them out of sync. Sometimes it rights itself on refresh screen. Sometime it doesn’t. Mobile no longer rights.

    Earlier when I changed theme to test and then changed it back to virtue the clumping was really bad and I had to restore a back up.
    thanks so much for your help!
    Kindest,
    Elby

    hannah

    (@hannahritner)

    5 years, 7 months ago

    Hi Elby,
    I just viewed from an iphone7 and am not seeing this. What device are you using? Have you tried clearing your cache?

    Hannah

    Thread Starter elbybrown

    (@elbybrown)

    5 years, 7 months ago

    Hey,
    Sorry for the delay had to go back to work and make things!

    @hannahritner I was using my phone – its an iphone 5 (so old). It looks okay on my browser on my laptop for now but I haven’t put anything new on. I was told though that the way to test if it was an issue with the theme was to change the theme – I did change to Storefront and all my pictures appeared as they should.
    When I changed back to virtue the issue became much worse and so I restored a back up. I have cleared the cache.

    If you want to see what the problem looks like please click the link above in my post to Kevin (@jx-3p) in the post before yours that comes up on my screen on my phone.
    https://postimg.cc/image/tby4luxez/17d0492d/

    Also, other people have seen the pics clumping too as I first raised this another topic area.
    Any suggestions greatly appreciated.
    Elby.

    • This reply was modified 5 years, 7 months ago by elbybrown. Reason: Missing bit of info
    hannah

    (@hannahritner)

    5 years, 7 months ago

    Hmm. Are you using the latest version of WordPress? What version of WooCommerce are you using? You could then try deactivating your plugins to test if any are conflicting. Let me know if there’s still no change.

    Hannah

    Thread Starter elbybrown

    (@elbybrown)

    5 years, 7 months ago

    Hey @hannahritner
    This is what someone else has said
    “Something in Masonry settings needs to be adjusted and that’s where you’d reach out to the theme maker and maybe they can assist.”
    This is going to be a dumb question but I have the free version – can’t afford to upgrade. I am just a small business trying to make it. How do you contact the theme developer?
    Kindest,
    Elby

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    5 years, 7 months ago

    Hey,
    So it looks like your loading lazy images, so the images are firing a “loaded” to the js events. Even though they are not. This is how lazy works. And so masonry is firing because the browser is saying the images are loaded. Then after masonry runs your images do load but hte layout is already set with heights configured without the height of the image. And you get your issue. This wouldn’t happen all the time because once your browser caches the images they are loaded instantly and before masonry runs.

    The premium theme already has this workaround and I’ll get it into free at some point but the fix is pretty easy. In your theme options > advanced settings > custom css box add this css:

    .product_item .kad-woo-image-size {
    padding-bottom: 66.67%;
    height: 0;
    overflow: hidden;
    position: relative;
}
.product_item .kad-woo-image-size img {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
}

    Ben

    Thread Starter elbybrown

    (@elbybrown)

    5 years, 7 months ago

    Hey,

    Thank you so much for the above Ben (@britner). I can’t tell you how good it is to have sorted. I really am a novice – went on a 4 day course and and then built my website (and I am technically challenged – ha) so its a learning curve. I very much appreciate the support over here.

    Thanks again.
    Elby x

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Pictures clumping’ is closed to new replies.