For the past year or so, we’ve been using Masonry.js to display our portfolio, but it wasn’t without its problems. Namely, the infamous image overlap. I was surprised no one complained about it when they visited our site, but given that most of our clients are conscientious, tech-savvy nerds, they probably just hit refresh…
At any rate, I finally implemented a fix that worked everywhere except mobile Safari (darn srcset). I also discovered known issues between Masonry and support for responsive images in WordPress 4.4 and up. It’s an older issue, but I wasn’t about to hack away at this anymore.
After some digging, I came across a responsive, CSS-only alternative by the folks at W3Bits. It was easy to implement and works like a charm on the latest versions of Chrome, Firefox, and Safari. I even followed their recommendation to include a Masonry.js fallback for older browsers. Hey, you never know.
The only downside is that the solution uses columns instead of rows, so items do not display in order. But that didn’t bother me.
Read the detailed solution at W3Bits.