[bug] Image gallery in masonry layout takes too much height

As requested, a separate thread based on this topic: Beta 2 - Masonry Row Jumps Back To Top of Row When Scrolling

The problem is that the element image gallery takes up the full page height before loading, but after the element is fully loaded, the masonry layout still uses the initial full height to make the layout.

Test url here: https://sanopharm.com/product/biohoney-masker-met-bijengif-50-g/?dev=bug

When the page is still loading, the gallery element takes up full height

When the page is fully loaded, the red-border has the correct height, but the masonry layout is still based on the initial full height

Temporary fix: I used a div width max-height.

The product gallery element’s height can change dynamically from what I’ve tested so I’m not sure this will work great with Masonry even if that initial height issue was fixed. Based on your layout though, I’m not sure you really need a masonry layout here. You could probably just place elements in a left and right column. We can see if this keeps coming up and if we can find a solution. Have a great weekend.

Thank Charlie! I understand. I hope there can be solution for this!
This is the layout I try to achieve. I need all blocks to be independent of each other regarding the height. When I use rows, the two bottom blocks start on the same height on the page. With masonry the lower-right block can move up.

Maybe I’m overthinking this, but I thought that masonry was the only way to achieve this layout.

Hello @Dagaloni,

The Masonry layout is using JS script. There are JS errors on the page which affects masonry.

For example, you have added thiscode which resulted to an error:
biohoney-masker-met-…f-50-g/?dev=bug:672 Uncaught TypeError: Cannot set properties of null (setting 'onclick')

The code:

/* <![CDATA[ */
// Makes the close button hide the banner.
function btnClick (e) {
		e.preventDefault();
		document.querySelector(".vakantie-melding").classList.add("verberg");
	};
document.querySelector(".verberg-btn").onclick = btnClick;

/* ]]> */

You should modify the code that have no errors in it. I’ve ask DeepSeek for an advice and it gives me this version:

/* <![CDATA[ */
document.addEventListener('DOMContentLoaded', function() {
    // Makes the close button hide the banner.
    function btnClick(e) {
        e.preventDefault();
        var banner = document.querySelector(".vakantie-melding");
        if (banner) {
            banner.classList.add("verberg");
        }
    };
    
    var closeButton = document.querySelector(".verberg-btn");
    if (closeButton) {
        closeButton.onclick = btnClick;
    }
});
/* ]]> */

Some of the 3rd party plugins are contributing to the JS errors as well. One of which is the Captcha. I do not know what plugin is it. The point is that some of the plugins that has the JS errors affected the Masonry layout. What you are trying to accomplish is possible once the JS errors will be resolved.

Hope this makes sense.

Thanks Ruenel, I fixed all the js errors but the problem still exists with the masonry layout. It looks like it really has to do with the image gallery.

Hey @Dagaloni,

Could you please provide us with your WP Access so that we can thoroughly check your Masonry layout? You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.