CSS position change on page load

The site with demo content loads up strangely with big gaps between posts.

Screenshot_25

After refreshing the page the gaps will be gone and it looks normal.

The same behaviour is when resizing the browser window.

Is anyone able to identify why this happens?

The site seems to be built with some WP builder and I don’t have the access to admin panel yet. The article cells have the code like this:

style="width: 308px; position: absolute; left: 0px; top: 0px;"

Site URL: birdot dot com

Unfortunately cannot access that link.

# Error 1020

Ray ID: 6cb69fd4089171a2 • 2022-01-10 14:34:07 UTC

## Access denied

Neither can I.

This website is using a security service to protect itself from online attacks.

1 Like

I can access the link. Here’s a screenshot of the problem beforehand:

On using F11 to go to fullscreen or back (is that reflow?), the page elements realign themselves properly to close up the gap. Also, reloading the page with the stories offscreen seems to make it more likely for the problem to occur.

1 Like

I still can’t access the page but from the html posted it looks like a js problem anyway as the styles are being written inline which suggests they are dynamically added.

I’m guessing some sort of addon like Masonry is being used and that is renowned for content overflowing on each other unless special precautions are taken.

Another reason for content overflowing is when the images width and height are not being added in the html width and height attributes.

e.g.

<img src="img.gif" alt="pic" width="560" height="300" >

Those attributes need to be correct and in place in the html.

Without those natural width and height attributes the browser won’t be able to calculate how big the image is even if you resize or set the size in css. It will only know once it has loaded and cached the image which is why a refresh or a reflow is required.

Also absolutely placing all your content is bad if you are doing this yourself. Its ok for something like masonry to do it because it is reorganising the content but inevitably it causes issues.