Streaming live at 10am (PST)

Can't make pixel-perfect


#1

Hi,

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?

  • Kim

#2

Hi. Please add url (and/or read only link)


#4

https://preview.webflow.com/preview/pixel-align?utm_source=pixel-align&preview=147113e814d7a1d3f1d6a5f4861c83fb

http://pixel-align.webflow.io/


#5

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.


#6

Hm… how interesting that background-size: cover was affecting it. I will try out the things you mentioned. I really appreciate the tips. :slight_smile:


#7

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?