jQuery Masonry - Fluid layout issue

Question

I am using the Masonry script to lay out boxes on a website.

It is looking good to me on most browsers, except for when I resize the browser window or flip my phone on its side and back again.

Without Masonry, I have a fluid layout that works fine. By fluid I mean that the boxes take up the full width on smaller screen sizes.

With Masonry, this still works ok when you first go to the site, but if you either resize the browser window or flip your phone on its side, the layout goes all screwy. Refreshing sorts it out again.

Not sure if there is a way to fix this, or if I should use another script, or even if it is best to just disable the script for smaller screens?

Hoping someone can help!

Thanks.

Answer 1

To the best of my recollection, Masonry grabs element dimensions when it is called, and then performs the masonry. It expects these dimensions to be static, which is how it is able to calculate the "masoned" layout.

Combining this with a fluid layout is a bit of a recipe for disaster, in my opinion. However, it's not impossible.

On the resize event, just call masonry() on the container again.