Grid Behaving strangely

Design help General
1

Hi all,

I recently added some new projects to my portfolio site and something wild happened with the way the images in the grid on my homepage behaved. It pushed the one image to the next spot which pushed everything below it down, leaving an empty space in the middle of the grid.

What’s strange is it only happened on screens of certain resolution? So it happened on my Macbook but not when my browser window was on my external monitor.

I ended up fixing it when I noticed the new image I added was twice the size of the others, so when I made it the same dimensions exactly, everything worked.

But now it’s happening again and the new image I’m adding is sized correctly.

It appears to happen when my browser window is at certain ratios. As in, if you scale the window proportionally it might not do it, but if the width changes and not the height it starts to flicker between the issue appearing and not appearing.

Here is my site Read-Only: Link
(how to share your site Read-Only link)

2

Hmm I messed around with the browser height and width for a couple minutes but wasn’t able to replicate the issue.

3

It also does crazy things when you view it on a tablet

IMG_0283.PNG
IMG_0283.PNG2732×2048 301 KB

4

This is happening to me as well with CMS items in a grid. It appears different than preview/design and I’m getting drastically different renderings in safari and chrome. Any one else?

5

I think it’s actually disrupting any new design I make with a collection list - for example flex box items with max with 1400px are going full width in safari when I publish…and in chrome they’re not full width but have tons of space on top and bottom. Very strange, very frustrating!