Gap in Curved Section Separator

Support
#1

When using the section separators, like this:

I get a small gap, but only sometimes:

This issue persists across websites and Pro theme versions. Please help me remove this visually unappealing gap. Thank you!

#2

Hello @haltandcatchfire,

Thanks for asking. :slight_smile:

I am actually confused. Are you referring to the gap in between separator and the content? You can fix that by adjusting the padding value of section. https://cl.ly/430r0O1y1e1E

Kindly let me know if I misunderstood your question.

Thanks.

#3

Sorry, I could have been more clear.

This very tiny gap is what I am referring to. My team and I have not been able to figure out how to remove it, and it’s shown up on multiple site we’ve worked on.

#4

Hello @haltandcatchfire,

Thanks for sharing the relevant details. :slight_smile:

Can you please share website URL for us to take a closer look?

Thanks.

#5

The issue is visible here and here and here.

#6

Hi,

May I know what browser are you using.

I can’t seem to replicate the issue on my end. I checked in firefox and chrome.

Thanks

#7

For me, the problem is visible on 66.0.3359.81 (Official Build) beta (64-bit) (cohort: Beta) but not on the latest Edge or on Chrome Beta Android.

#8

I have also seen this problem appear on my own site when using Safari as a browser, but again only sometimes.

1 Like
#9

Hello @haltandcatchfire,

Thanks for asking. :slight_smile:

I have tested the website on Safari, Chrome and Firefox and it seems to be working fine on my end. Please see the screenshot. Safari https://cl.ly/1C062t1K2U0M, Chrome https://cl.ly/361X1A3b1o0m, Firefox https://cl.ly/3e3h1J241X3x

Thanks.

#10

The issue only occurs sporadically. I haven’t been able to isolate what the cause is yet, but it’s very annoying.

Like @Pixel8r said, it’s only sometimes.

Let me know if I can provide any information about my machine/browser, because it happens a lot for me.

#11

Hi there,

Yes, please provide more information about the device, browser and its versions, and screen size. I see this happen on smaller device but not always, and it varies on viewers end.

Thanks!

#12

I consistently encounter the issue on this device:

Lenovo ThinkPad X1 Carbon 5th Gen
Windows 10 Pro Version 1709
2560x1440 with Windows Scaling set to 175%
Google Chrome Beta 66.0.3359.81
User Agent Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.81 Safari/537.36

#13

Hi there,

Is it the scaling in the browser? It’s normal on scaled view in browsers and it should 100% scale. Because of scaling, the pixel calculation isn’t accurate creating a bit of gap. Example, 5.4px, since decimal isn’t possible, it’s rounded off to 5 (hence gap of 0.4). But that’s based on my observation with browser’s scaling, especially with chrome. And other browsers doesn’t have that feature so it’s not standard and not recommended to base your design.

Thanks!

#14

I don’t have any scaling set in the browser.

#15

Hey @haltandcatchfire,

I was having this issue as well on mobile, and then it was also persisting on IE 11, using angle in and out separators. Here’s the code I was given, which resolved the issue. I’ve edited the code for you to use with your curve in or out separators. Choose the one (in or out) that you need. You may need to play with adjusting the numbers. I entered this code in the Additional CSS section, not the Custom -> Global CSS section.

.x-section-separator.x-section-separator-top.x-section-separator-curve-in {
transform: translate(0, -99%);
width: 105%;
}

.x-section-separator.x-section-separator-top.x-section-separator-curve-out {
transform: translate(0, -99%);
width: 105%;
}

Hope this helps!
~ Rayna

#16

Thanks for sharing @blissville

@haltandcatchfire , could you try that as well. And I’ll continue checking but as of now, I can’t reproduce this issue on my end.

Thanks!

#17

That CSS didn’t appear to change anything when we tested it out. However, I spoke with one of my web designers and he said he has been encountering that issue for a while.

His solution - just change the height value in increments of 1 pixel until the line disappears. It usually only takes 2 or 3px until the problem is solved.

This is still a strange issue that probably needs a real solution, but for now it looks like simply changing the height value by a few pixels is a temporary solution.

#18

Hi again,

Yes that will serve as a temporary solution, I tried to replicate the issue on a Windows 10 machine but I too can’t replicate the issue with the normal browser settings. However if you zoom in the browser to 125% or higher, then I see this issue happening as Rad explained previously.

I’ll check for this case as I can’t replicate the issue as well.

Thanks!

#19

For the record, I used to have this problem but I haven’t seen it for around 3 months after latest updates. Hopefully, it is resolved.

#20

Despite the temporary fix that we found, the issue still happens occasionally across a random assortment of devices.

It’s not as often, so the issue is not at bad, but it’s definitely still a problem.