How to get rid of lines throughout site?

I have heavy lines showing up throughout my site under images. I’ve tried setting margins to minus numbers, changing the body BG to show up problems, removing any borders and even setting them to transparent or white just in case, making sure the BG colours all match but nothing is working to get rid of the lines.

Sometimes the lines don’t show in the designer but when I go to preview they show up.

https://preview.webflow.com/preview/ellsys-fantabulous-site?utm_medium=preview_link&utm_source=designer&utm_content=ellsys-fantabulous-site&preview=4b5342c22d24599512aed3015a55481c&workflow=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You need to publish your site to diagnose it properly using the browser’s CSS inspection tools.

However the dark left-side line is in your image.

And the line at the bottom of the image is because you have the height set to 624. The image is slightly shorter than that but you have the background tiled, so you’re seeing the top again at the bottom for about 4 or 5 px.

Reduce the height to 620px and you’ll see.

I’d disable the tiling and probably cover instead, or you’ll likely face problems with responsiveness.

1 Like

Fantastic, thank you Michael! :pray: :slightly_smiling_face:

I’m back with the same problem! Your solution worked before but it doesn’t work now. I had changed all images to section backgrounds after which was better throughout the site but now the line is back.
Also, the line under the photo is much larger on safari so it all looks much worse on safari than on chrome, which I don’t understand at all.

Read only link


I don’t see any line below the image on chrome, however I do see an image wrap at the right side [1]. Your image is not designed for tiling, so generally the setting to be cover [2] and maybe the position to be centered ( center dot ) [3].

I made those three changes but am still getting a thin line on chrome and a massive line on safari. It’s so puzzling :thinking:

Can’t say re Safari, but this CSS is likely to cause some confusion.
If you’re not wanting a border here, likely you want no border CSS. This says “solid border, 0px, transparent”, which doesn’t make sense.

Click the blue items and then the undo to reset them. Republish, see if you’re still having border issues.

image

Hadn’t noticed the border, removed it but it hasn’t removed the line. Thanks for the suggestions, I have so much to learn.

You shouldn’t have a line and I’m still not seeing any. Have you republished?

Maybe send a published site link to the page you’re seeing this, and another screenshot if it has changed.

Perhaps try setting Tile to none ( x ) on these background images as well, in case safari has a size calc glitch.

I set tile to none also and republished. I still get a small line in chrome, a large line in safari but on my phone it displays perfectly.

I’m reassured that you’re not seeing it on your chrome. I think I’ll just leave it as is and hope for the best.

One other question - is there a way to set a second choice font? One of my fonts doesn’t show in safar and is replaced with a terrible one so I’d like to say if this font isn’t available then use a specific other one rather than whatever the default is.