Pictures clumping

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

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

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

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 6 years, 5 months ago by elbybrown. Reason: Missing bit of info

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

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

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

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