Streaming live at 10am (PST)

Gap in CMS gallery every 20 pixels

Hey everyone!
I have a CMS powered gallery on my page, that lays out the images 3 across in desktop and tablet mode.
I noticed a weird behavior where every 20 pixels in screen width a small gap (maybe 2-5 pixels wide) develops between the images in each line.
I’m thinking this may just be a result of the fact that 3 doesn’t go in to 100 evenly (I set the flex bias to 33.333333%), but I’d like to know if anyone has encountered this before and if they were able to fix it.

Here’s my share link: https://preview.webflow.com/preview/website-88a3d1?utm_source=website-88a3d1&preview=1def0a8281856545ed5c07e3828e13e0

And here’s the published page: https://website-88a3d1.webflow.io/

The gallery in question is “Diamond Rings” under the Jewelry heading at the top.

Thanks in advance!
Scott


Hi

Are You talking about the gap that shows in the image below?
33

The gap between the rows is intentional. I’m getting a gap between each of the 3 images per row.
-----

I’ve noted it happening at 20 pixel intervals between 810px all the way up to the width of my monitor (1920px)

Ok. I’ve checked again. On my screen it looks OK as You can see in the previews reply, but I found that on 1115 px width it happened. see the attach image

Well I’m glad it isn’t just me!
Any idea why it’s happening or how to fix it?

Also, is that an add-on that allows you to see the screen width? That seems pretty handy!

In order to diagnose the css (replicate your viewed behavior), a tester would need your OS & version, browser, and browser version info.

Chrome 73 on OS X 10.14.4 does not display the gap line for me. I would mention that the page load is very heavy at 23MB.

It is “Breakpoint” - Chrome extension.