Masonry Blog Rendering Issues

The blog is loading with odd spacing and inconsistencies that don’t correlate to any coding changes on our site as we haven’t made any.

If you zoom in and out on the page, everything magically refits itself and looks correct. but on the initial load (what clients and users are seeing) it looks awful.

Please advise.

Hey Jesse,

This happens because the Masonry scripts finish calculating the post positions when your posts aren’t loaded yet due to slow content loading possibly through the use of Jetpack’s image optimization.

I’d recommend you disable Jetpack or use a different image optimization plugin just for testing.

Also, deactivating caching and Cloudflare before testing.

If you want a bandaid solution, add the following code in Theme Options > JS. It will trigger a resize after 2 seconds.

setTimeout(function() {jQuery(window).trigger('resize');}, 2000)

Just note that we do not provide support for custom codes. If that code causes issues now or in the future, please remove it or consult with a developer to edit or fix it.

Hope that helps.