Help removing lines between sections in Dawn theme?

[kianialexandra]

Hello! I'm preparing to launch my shop and was wondering if someone can help me remove these lines that seem to be appearing in my shop between sections. I don't think they were there before, so I feel like they just showed up randomly? I could be wrong though, but anyway, as you can see it shows differently on the Desktop and Mobile versions

Here is the line that's appearing on desktop:

And here are two lines that are appearing on the mobile version:

I know the lines in the white seem small but to me they just look very unprofessional, can anyone help me get rid of these?

Here is my shop info:

Website: cloudsinmyclub.com

Password: skohlu

[suyash1]

@kianialexandra - please add this css to the very end of your base.css file and check

@media screen and (max-width: 989px){.section+.section {margin-top: -1px;}

[kianialexandra]

Hi and thanks for your reply!

Unfortunately the line is still there 😞 

[suyash1]

@kianialexandra  - try code given by @DavidEKim - it should work

[DavidEKim]

@kianialexandra 

Hi,

Please add the code below to assets/base.css file.

.section+.section {
    margin-top: -10px !important;
}

Hope it helps.

Thanks.

[kianialexandra]

Hi David!

Thank you for your response, and the code seemed to get rid of the line in the blue section on both desktop and mobile which is great! However, the line in the white section is still there on both mobile and desktop. Any ideas? 😕

[DavidEKim]

@kianialexandra 

Hi,

That's the image issue, not the coding or structure (DOM) issue.

You need to edit the image & replace.

Your file.

After edit (removed the line).

You may download the above image and replace it.

Hope it helps.

If you resolve the issues, please click "Like" and "Accept Solution".

Thanks.

[kianialexandra]

I think i fixed the issue! I replaced the image with a new one and the line seems to be gone now!

[kianialexandra]

Actually David, I think your code is cutting off my image. Any ideas?

[suyash1]

@kianialexandra - you have my css code above, please adjust that value -1 as per your need, like -2,-3 etc

please copy that css and check

[DavidEKim · Accepted solution]

@kianialexandra 

Hi,

You can change the margin-top to -9px (or smaller) as below.

.section+.section {
    margin-top: -9px !important;
}

When I checked the gap (margin width), that was about 9px. That's why I gave you -10px for extra safety. You can check the gap with margin width -9px (or -8px) until it fits your needs.

If the issues are resolved, please click "Like" and "Accept solution". Other users may find this post useful if they have the same issues.

Hope it helps.

Thanks.

[NateBaby335]

I know this is an old thread but I was struggling with this issue and I just found a solution for it. You dont need to use and CSS to hide borders and whatnot. if you go to the Theme settings and click on Content Containers. you can change the border width to 0px and it will get rid of those colored lines that separate the sections.