Solution 1 :

If anybody else has the same issue, I noticed resizing the window fixed it, so adding a call to the window’s resize listener each second stopped the layout from breaking for me. Not the best solution but it works!

window.setInterval(function(){
   $(window).trigger('resize')
}, 1000);

Problem :

I made a quick mock-up webpage to display past projects I’ve done. It works fine locally but when deployed, it now and again results in the page being loaded incorrectly with images in the portfolio section appearing on top of each other, shown in the image below.
Stacking divs

I am using a modification of this colorlib template.

The page seems to fix itself with a refresh, however if I disable cache it stays broken after the refresh which makes me think it has something to do with certain assets being loaded before others. It also works fine when testing locally.

The website itself can be viewed here, and the source code here. The problematic section starts at line #242.

If anybody has any suggestions that would be great, thanks in advance!