Solution 1 :

This is happening because the width of the viewport width can be an odd number of pixels (which cant be divided equally) and so there is a sub-pixel rendering issue (the white line you’re seeing) specifically with display: table and display: table-cell.

I was able to remove the white line by changing the parent container to display: flex and the child to display: block

CSS

.splash-cont {
    width: 100%;
    display: flex;
}
.splash-bg {
    width: 50%;
    height: 100vh;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

Problem :

I can’t get the 1px of white space between the two DIVs on the home page to disappear. When I resize the window, it’ll sometimes vanish for a quick moment. But that does me no good on mobile or initial load.

Does anyone have any thoughts on how to kill the white line?!

Comments

Comment posted by Scott Marcus

Please always post the relevant code that you are asking about right here in your question, rather than posting a link to a 3rd party location where we have to sift through (possibly thousands) lines of code to find what you are asking about.

Comment posted by marpe

I think having 2 elements with width 50% may cause a 1px gap, I tried replacing

Comment posted by Rylee

Using

Comment posted by Scott Marcus

This is a poor question because it doesn’t include the code that it asks about within the question and makes us have to go to a 3rd party site and sift through code just to find what it is asking about. We don’t want to post answers to poor questions because it just invites more poor questions.

By

Leave a Reply

Your email address will not be published. Required fields are marked *