Section angle in separator has lines in some mobile devices

[Minna]

I have searched other topics on this issue and found a code to use to fix it, but then there is no more sharp angle in the separator… How to fix that then? I see no line in my devices but atleast on some samsung phones the lines show up.

with code…

The code I used:

.x-section-separator-bottom, .x-separator-bottom-angle-in {
bottom: 2px !important;
}

.x-section-separator-top, .x-separator-top-angle-in {
top: 2px !important;
}

.x-section-separator-bottom, .x-separator-bottom-angle-out {
bottom: 2px !important;
}

.x-section-separator-top, .x-separator-top-angle-out {
top: 2px !important;
}

[tristup]

Hi Minna,

Thanks for reaching out.
I have checked your website on my Android mobile device but didn’t find the line which you mentioned here. I have checked with Online Testing tools but didn’t find the same in the Samsung mobile too. Can you please mention the browser name and version, and the operating system you are using, that helps us to replicate the issue at our end?

Thanks

[Minna]

I now removed the css mentioned above that I had added to remove the lines. (which resulted in the later photo with the section background on top of the angle)

Phone is Samsung Galaxy a70, newest Chrome browser

[christian]

Hey Minna,

Regretfully, there is currently no solution to this but to create your own divider. On the upside, we have a three-part tutorial on how to create your own dividers in our Youtube Section Dividers playlist. You can watch part 1 below and the rest of the parts here

Hope that helps.

[Minna]

oh no… do you know if this is an issue only in some mobile devices? If so, it would save me a lot of job fixing just the mobile version and leave the desktop version as it.

[christian]

Hey Minna,

Yes, it is an issue only on some mobile devices. Specifically, the issue happens on you pinch to zoom on mobile and zoom in on a desktop browser. The issue doesn’t happen using 100% zoom for desktop. In the following screenshot, you’ll see that the desktop zoom is 500% and the gap is very clear.

In the screenshot, you see that part of the image background of the upper section is showing. Luckily, based on that, I realized a potential solution and that is to fill the gap with a border. Set the bottom border of the upper section like the screenshot below. Increase 3 as needed.

See how it works below.

Hope that helps.