Website masonry.js image overflow

Hi all,

I’m putting together a masonry style website (https://rl-brand-site.webflow.io/) that is just starting to look nice - though there’s still a lot to do.

On the first page I have 9 “main” projects display in the masonry grid, and generally speaking this loads fine… However when I return to the home page from a project page, there is often an image overflow where the div/section hasn’t sized to the masonry layout. It almost always rectifies itself on page refresh, but it shouldn’t be doing it in the first place.

Here’s an example of it doing this:

Any ideas are of course welcome.

My read-only site is here: https://preview.webflow.com/preview/rl-brand-site?utm_medium=preview_link&utm_source=dashboard&utm_content=rl-brand-site&preview=4578899192b0294bc0986521618ccc4b&workflow=preview

Nobody that uses webflow uses masonry.js?

Try to load masonry after all elements are completely loaded.

jQuery(window).on('load', function(){
    //masonry init and options
    // .. codes
}

https://api.jquery.com/load-event/

Hi Ezra,

Thanks for this. Where would I put this code? In the Before tag?

Would I need to do anything else? Presumably I’d have to put it on every page that loads masonry.js?

Would I have to change this code, or can I just copy and paste what you’ve written here?

Many thanks,
Chris

Hi Ezra,

Thanks for this. Where would I put this code? In the Before tag?

Would I need to do anything else? Presumably I’d have to put it on every page that loads masonry.js?

Would I have to change this code, or can I just copy and paste what you’ve written here?

Many thanks,
Chris