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):
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
Setting the body background to a different color is a great idea for finding bugs, thank you for the suggestion
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?
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
I was having a similar issue on my site, where I had these fine white lines at the borders of my site’s sections. I navigated to:
Borders > Selected the border direction > Clicked the ‘X’ next to Style
The line at the bottom of my section disappeared even though the Settings panel showed no line there. This is likely a bug that needs resolution, perhaps a setting carried over from previous versions?
I’ve checked the SVG – no white line. I’ve checked and rest the boarder settings as suggested. I was skeptical but even tried the -1px margin, but I’m still having the white line show. Unfortunately, I only have iOS phones to hand to test.
I know it’s been a while since this topic was opened but I’m new to Webflow and came across this because it was happening to me. I was exporting an svg from Figma and I just couldn’t get it to show without the line. After some playing around, I zoomed in on the svg in figma and noticed that side where the white line was showing was kind of half way between pixels. I wondered where this might be the cause so I exported it and imported it into Illustrator. From here I resized it slightly and saved the svg again. When importing it back into Webflow the line had gone. I’m not sure if the resizing in Illustrator was necessary… it might just work by opening it up and saving it as an svg again. Whatever the case, this seems to have solved the problem.
