Streaming live at 10am (PST)

White lines or spaces between sections

Hey Webflow-Community!

I am having an issue with the section background-images on a website I am designing.

There seems to be a small space or a fine white line between each section that I can not get rid of.

  • The lines are most prominent in the Designer View on mobile devices, but can also be seen on desktop view if zoomed in.

  • It seems that the lines are not visible on the desktop version of the published website, but they are visible on the mobile version of the published website.

Here are screenshots of the lines from my mobile phone (iPhone 11):

I used .svg files in order to keep the file size low and to be able to scale the images.

I have already tried to exchange the images with jpeg files but the problem persists.

I am also happy to share more details, images or screen recordings if that would help.

Thank you very much in advance for your help!


Here is my site Read-Only: Webflow - Ingvar's First Project

And here my published website: https://ingvars-first-project-af2d8e.webflow.io/

Hello.
I think the ‘background-angebot 1 svg’ is the course off this. When I change the body background to ‘red’ I see a thin red line above this svg. So the svg image has a thin white line on top?

Hey, @HGWeb!
Thank you very much for your fast reply :smiley:
Setting the body background to a different color is a great idea for finding bugs, thank you for the suggestion :slight_smile:

The .svg’s don’t have a line on top of them I checked that again. But just out of curiosity, if there would be a white line on top of the svg’s, like a hard coded stroke, would that be affected by the color change of the body background?

The problem I am seeing now is that in order to close the gap I need to add negative margin on one of the sections, which will create another gap on the opposite site of it. Is there a possibility to maybe keep the cover funcionality of the background-image but enlarge it by a few pixel?

Or is there another solution I can not think of?

Once again, thank you for your help!

Hello Ingvar.
I don’t see any white lines anymore. But you have a line height op 1px on the ‘p white’
So the text overlaps!

Hey @HGWeb,

Ah, that’s right! Thank you very much for pointing that out to me!

After some discussion with a friend of mine I’ve concluded that the thin white line is probably a rendering issue on different browsers, since on Chrome I was not able to see the line, but on Safari I did see it.

I was able to solve the problem by using a background gradient with using the colors from the top and the bottom of the SVG to blend in.

I still hope there is a better solution to this problem, but I haven’t found one yet.

If you have any better idea of how to solve the issue please let me know :slight_smile:

Best,
Constantin