Design Problem with Section Lines

Design help General
1

Hey guys, I have a simple question:

In my one-site-page I use different sections. On the screenshot you can see one of those sections. When you zoom in or out with a mobile device, such as Smartphone or SmartPad, there are these lines appearing. When I reload the site they disappear again. They only appear when you zoom in or out. I have already tried to fix the section boarder line settings, but this did not solve the problem. Actually the lines are set to invisible. Could anybody please help me?

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

2

I don’t know for sure but there might be a small gap between the section on the top and bottom. If you set your “Body” background color to the same dark color as the other sections. That might get rid of the lines.

If you share the read-only link we can see what’s happening here.

1 Like
3

Thx for your quick answer :)…here is my read-only-link: https://preview.webflow.com/preview/mr-hannss-dapper-project?utm_medium=preview_link&utm_source=designer&utm_content=mr-hannss-dapper-project&preview=0b19cba8a3f6ffef2013d59de6b821d3&mode=preview

Hope that you can help me :slight_smile:

I tried your idea. Switching the color of the body to the same color did not solve the problem. It only turned the white sections of the page in grey, so that the whole page will not work as wanted.

4

But it would work as wanted, if you assign a background color to your sections.
Don’t know where it comes from, but that line is a 1px gap which is displayed between the sections and has the color of the body.

5

Thx for the advice…I was able to fix the second line in the way you guys told me…but it still lasts the upper line (check the screenshot). In this section I use a linear gradient from white to #1b1b1b. How can I get this one also away?

6

I got it working. Just set the top margin to “-1px”…! Thx guys for the advices :).

7

Quick fix:

Add this to your “section.wide.purple” class

  1. background-color: white;
  2. margin-top: -1px;

If you use this class multiple times, make sure to add a combo class to be sure you are making changes only on this section.

Maybe someone will invest some time and look what the real problem is and gonna provide a more clean solution.

1 Like
8

Thx a lot…that worked fine! Can I ask you guys another question?

How can I change the color of the underlines in the menu?

9

You have to edit the states of the menu item.

In your case, you have to target the following 2 states:

  • Hover
  • Current

More info here:

11

thank you so much didnt realize +)