Images overlap boxes

Hello @roy82

Have you used a3 Lazy Load with this theme before without seeing this issue? Or is it the first time you use this theme with Lazy Load?

If you like to post a link to the product page where you are seeing this I will take a look using inspector to see if I can see what is causing the issue.

Thank you – Steve

Hi Steve,

Thanks for your reply!

It’s the first time I use this theme with a3 Lazy Load.
The website I used it is: https://www.trendycadeaushop.nl

Kind regards,

Roy

Hi Roy

Thanks for the link. The issue is indeed being caused by the theme you are using. That theme on first load checks the image height and sets the image container height from the image for the container.

With lazy load the first image loaded is the blank image of lazy Load and when Lazy Load loads the actual image after everything else is loaded – when your image is taller that is when you see the overlap.

Roy to make it work for this theme , below is a custom style that you can add if your theme supports adding Custom CSS via a box on the theme admin panel – just add this into that and save changes – otherwise you’ll have to add it to the theme CSS

.product-images .crossfade-images {
height: auto !important;
}

That custom style will set height of container to be auto based on the the height of the real image ( not use height of script from theme ).

Roy you might like to raise a support ticket with the theme dev and let them know about it and suggest that they make their theme 100% compatible with a3 lazy Load.

Please let me know if the adding the little bit of custom style to your theme solves the issue for you.

Thanks – Steve

Hello Steve,

Thank you very much! It just worked great!

I will let the theme developer know as well!

Thanks again!

Roy