Lazy CSS breaks JS plugin

[c_fitzmaurice]

Hey guys, need some help figuring out a bug in my website, this is my first forum post about it.

So for the first time I lazy-loaded my CSS into my site below the fold. This works great except it breaks one JS plugin on mobile only, not sure why this is the case. In the portfolio section, all the images are squished very small – the CSS is not being applied and I am not sure why. Thanks for any help!

My site: http://www.fitz-maurice.com
The plugin: http://isotope.metafizzy.co/

[shaneisme]

There are a lot of things that could be causing the break.

My recommendation would be to reduce the complexity of your problem. Start by taking away lazyCSS, if that doesn’t work, peel back another part until it’s working again.

Once it’s working again, you could set up a CodePen and make that your reduced test case (see tips). With your simple baseline, you can then start to mess around on CodePen by adding scripts back in and see what breaks it.

Once you know what breaks it, and you still can’t figure it out, let us know as someone might have experience with this or see something obvious you’ve overlooked.

[c_fitzmaurice]

The problem was when I moved the script ordering around it was initializing the the plugin before the CSS was loaded which made the plugin calculate the offset values for the squares incorrectly. I made sure to load the CSS before initializing the isotope plugin and that fixed the problem.

[Author]

Posts