Extra vertical line at end of third column

Hi there,

I’ve put 3 columns in a row and set to equal width. I want a vertical line in the centre of the two gaps between the columns. Rather than mess with borders I picked up a tip on one of your videos to make the background colour of the row the colour that I want the line to be and set the Column colours to the same as the colour of the Section. Then I set the Gap Width to 1px and hey presto, I have a vertical line dead in the centre of the gap.

But if you pull the browser window out and in I see an extra vertical line appear and disappear on the right of the third column. Normally you wouldn’t notice this when the background colour is transparent or the same as the section but I just can’t work out what’s going on and why it does this. Can you help?

Here is a link to a page https://perfectmurder.boomfly.co.uk/interactive/. The three column section is under How It Works.

Thanks

Hello @seepops,

Thanks for writing in!

I am seeing this when I resized the browser:

Can you please provide a screenshot so that we can have an idea of how it looks like from your end?

Thanks.

Here is what I see. There is an extra line on the right hand column. If you resize the browser slowly you should see the line appear and disappear. I’m using Chrome but the line also appears in Safari.

Hello @seepops,

Did you see the line as you gently resize the browser window? Please understand that the actual device screens does not behave the same way you gently resize the browser window. For more actual testing, please use the responsive screen simulator in Chrome. You might need to check this out:

Hope this helps.

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