Page only loads properly after refresh?

Hi, not 100% sure this is the right place to ask this but i’m having some serious trouble with this page of a site i’m working on: http://www.contentsherpa.com.au/?cat=11

When I open it in firefox the page will load wrong (all the boxes squished together) but when I refresh the page it all straightens out. When I open it in chrome, it remains broken even after I refresh.

I can’t figure out what is causing this and was hoping someone could help!!

The site is built using wordpress, and my theme is based on one called Gridly (if that helps at all?)

Thankyou!

The page does not validate so different browsers take a guess at the proposed output.

Try removing the following validation errors:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.contentsherpa.com.au%2F%3Fcat%3D11&charset=(detect+automatically)&doctype=Inline&group=0&No200=1&verbose=1

If all else fails then read the documentation (I was going to say something ruder :))

If your layout has images, you probably need to use imagesLoaded.

Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, web fonts, embedded buttons. To fix it, you need to initialize or layout after all the items have their proper size.

Your images are way too big a file size anyway which exacerbates the issue. Those little post images are weighing in at 150k each and you have over 20 of them!! They could easily be optimised down to about 15k each and save half an hour download time :slight_smile:

Your big background image is 800k and should be 200k max. You can’t see most of it anyway so probably could be much lower than 200k.