Streaming live at 10am (PST)

Help to Resolve Extra Pixel

Hello all,

I am currently building a page with Isotope on Webflow. I encountered this problem whereby there is an extra pixel in the grid collection layout. I tried to force the screen width to 100vw but it does not solve the problem too.

I really would love some help to solve this issue.

Here is my site Read-Only: LINK

Original Page with No Issues:

Current Page with Issues:

Hi @zhiliangggg, your links return 404. Can you please update them? :webflow_heart:

Hey Donald,

Sorry for the broken link. It’s updated. Thank you!

Is this the extra pixel you’re talking about? the 1px black line? It’s causing an horizontal scroll right?

Hey Donald, sorry for the late reply. Here’s the problem, the screenshot that you took cannot really see it but when i changed to orange bg it is very obvious. It’s after those borders. Thanks!

Alright, so is it the white lines that aren’t supposed to be there?

Got it! It’s really odd because it disappears when you resize the browser window:

Maybe you can try to set your margin to 0px instead of auto?

My guess is that isotope filter sets up your items to be absolutely positioned and rounds their placements to 1px, while your column width is 16.666667% which cannot be resolved to a pixel and will always leave small space. For example now on 1920px wide resolution this percentage for your columns renders as a 239.063px but next absolutely positioned item is placed 240px from the left leaving this line.


Hey Donald,

Sorry for the late reply. Have some personal matters to attend to. Setting it to 0px also doesn’t work for me. If this issue is like how @dram mentioned, I will have to ditch Isotope.

Thank so much for the help!

1 Like

Hey Dram, will there be any resolution to this issue? or would you suggest for me to ditch Isotope as a whole? Thanks!

Not from me, unfortunately. Perhaps someone more skilled can help.