Remove 1 pixel lines between content bands?

Hello I have seen a few threads about this but not an answer that has helped us. On our new build there are several instances of 1 pixel lines poking through when ever we use a top or bottom separator. How can we eliminate this sitewide? It also seems to not be visible at certain viewpoints, this is 1920x1080

Here is an example but there are more sitewide, probably 10 instances total:

Homepage: Home - The Flying Locksmiths

Thanks much for any help!

Hello @FLYINGLOCK,

Thanks for writing to us.

I checked your given page URL it seems that there is no border at my end. It might be the issue of the browser cache. I would suggest you please clear your browser cache and then check it again. If the issue still persists please let us know with the video so that we can replicate it at our end.

Thanks

Hello, you won’t see it at every resolution. If you zoom in via CTRL+ or zoom out via CTRL- you will go up and down in increments of 10% browser scale. The line only appears at certain increments, one I am sure of is 1920x1080.

I uploaded a video here: https://youtu.be/9grkmMRTUzE as I cannot see where to upload video to this forum

Hello @FLYINGLOCK,

I followed your instructions and I can replicate the issue, it seems that you have set the section margin-top as -100px, I would suggest you set the margin-top as -98px and then check it again.

Hope it helps
Thanks

This solved the issue at one increment, but it didn’t solve the issue. If you scale up or down you will still see the pixel line. Also, this pixel is visible on every band that we use the top/bottom separators.

In other threads I saw a z-index fix, but nothing seems to work across the site. I have seen this posted many times but I have not seen 1 sitewide fix. Thanks much for the help

Hey Brett,

In your section where the video is located, I suggest that you decrease the value of your padding-bottom from 100px to 85px, and let’s see if it will resolve your issue.

Hope that helps.

Hi this also may solve this one band but this pixel issue happens anywhere that we have a top or bottom separator at varying increments. Is there a global fix?

Hey Brett,

The 1-pixel issue on your website is coming from the video background, you need to adjust your section separator so that you can occupy the whole spacing. That being said, I suggest that in your section separator, increase the value of your inset by 1px.

Hope that helps and let us know how it goes.

This worked on every page except this one: https://flyinglocksmiths.com/security-systems/
Any idea why on this one only?

Hey Brett,

I check the page and the inset is still set to 0. Please double check the setting and set it to 1. I tried using the Google debugger tool and it is working with inset value of 1.

Hope that helps.

Agh! Great, thank you

Hello Brett,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.