On the gallery page I’ve set up some link blocks and set it to specific areas of the page. Particularly with “Other Creations”. When clicked it brings you to another part of the page. I can’t understand why this isn’t working. Anyone else have this issue and is there a resolution for this? I’ve even tried it with a Button but still doesn’t work. This site was not done in CMS because CMS also has it’s limitations with the number of images you can use for each section.
Let me know if you can help with some guidance.
Thank you!
Donna
If you mean the link block as “GALLERY_LINK” and link to specific areas as “Section”. I checked both preview and the staging URL, it is working. Maybe try it with other browsers or clear your cache.
Yes exactly, its weird…it does work after you push it the 2nd time. Just wondering if I did something wrong, but the others seem to work just fine. Cleared the cache and tried other browsers. Other is just the problem.
This is happening because of the lazy loading of your images.
When you open that page for the first time, not all the images have been loaded, therefore their height is 0. This means that the “#Other” section and even other sections possibly are a little “higher” in terms of “scroll position”.
When you click the “Other” button, the page starts scrolling down and the other images start to load as you approach them. With them loading, their height stop being 0px and become something taller… That’s where the problem lies, because them achieving a bigger size means that the “Other” section gets pushed down the page.
If your project’s structure was a little different, experimenting disabling the “lazy loading” of images would be trivial and would allow you to see the behavior I’m describing… However, given how the page is structured, you would have to disable that manually for each of those portfolio images.
Now, it’s time for the solution:
Set a fixed height to those images through the aspect-ratio css property and also add width:100% to the LB_IMAGE class.
