Isotope with Masonry Layout Broken / Not Lining Up (and How to Fix It!)

December 8, 2021 9:07am

I love the folks at Metafizzy, especially for their Flickety slider, but a recent project called for using their Isotope layout feature.

And then one day, it broke.

I struggled to figure out the answer, searching through their documentation, endless Stackoverflows, and all across Google, but couldn’t figure it out.

Until I did! The problem?

Lazy loading images!

I happen to host with SiteGround, and the project was a WordPress site, so I used their SG Optimizer plugin. This plugin includes a lazy loading feature, and I was able to easily resolve the issue.

First, where I was calling the images, I was simply using the_post_thumbnail('medium');

The SG Optimizer plugin has the ability to exclude lazy loading by class, in this case that class was .skip-lazy.

So in my theme file, I just changed it to:

Problem solved!

Up Next: CSS: How to Position a Background Image X Pixels from the Right Edge