I’ve noticed that when using columns or flex items often divs won’t perfectly align horizontally. You will sometimes see a 1 pixel gap between divs, which looks really ugly if you’re displaying images.
Now if you had an odd number of columns I could understand, but two? As far as I’m concerned, the only way to get rid of the 1 pixel space, is to make two divs and manually give them a width of 50%. Does anyone have a better method?
Hi. Please add url (and/or read only link)
I think it’s because you are applying display flex to the Webflow’s ROW/COL component, which already has certain default styles that shouldn’t be overridden.
Try creating your own flex row using a plain div, and flex "col"s using a plain div.
Or perhaps background-size:cover isn’t working out. Disabling it fills the 1px gap correctly.
Hm… how interesting that background-size: cover was affecting it. I will try out the things you mentioned. I really appreciate the tips.
Yeah, I think it might be a bug on high-res monitors, for example it is very obvious when viewing it on my 4K monitor, or if you have a “retina”-type screen like a macbook?