Still Getting Issues With SVG Separators

Support
#1

Hi,

I previously raised an issue a few months ago here ? Tiny Gap Between Sections When Using SVG Separators & CSS Gradient Backgrounds

I’m still having the same issue, but it is only happening on certain devices and screen-sizes now.

I’ve checked all the SVG’s and none of them have any edges as before.

I even downloaded one riectly from the site and attached it here so you can see there is no gap at the bottom.

  • I have used Affinity Designer to create the SVG’s - it’s a professional tool
  • I have also used Figma to design SVG’s and that is a pro tool too

Please view this page for an example - https://codarity.com/seo-services/seo-consulting/

  • Viewing this page - chrome desktop = no issues
  • Viewing this page - chrome android = small gap
  • Viewing this page - firefox desktop = no issues
  • Viewing this page - firefox android = no issues
  • viewing this page - edge android = no issues

It only appears to be on some pages, some of the time and for tablets and laptops some of the time, but I don’t have those to test in more detail.

I am able to replicate this if I adjust the screen size to 1397x907

Questions:

  • Is this possibly some rendering issue?
  • Is there no way I can just adjust the margin of these dividers to be a slight negative value.

This issue breaks up the fluidity of the design which is a bit frustrating and I can’t seem to solve it by tweaking the CSS or graphics.

Sidenote:

It really would be so awesome if X Pro had better divider options to crete your own or simply more styles and variables

Regards

Dan

#2

Hey Dan,

I see the issue. The quickest solution for that is to cover the line by setting the background of the next section to white and set -1 to -2px top margin of the said section.

I believe this is a rendering issue with some SVGs in general be we need more study on that so we can’t provide an explanation for that at this time.

Hope that helps.

1 Like
#3

Hi,

Thanks as always for the speedy response and excellent support.

I’ve just tried your technique and that appears to have resolved the issue.

I’ve only tried it on a couple of pages, but it now appears correctly without any gaps on chrome, edge and friefox, desktop and android, so I’m pretty sure it will work fine for the remainign pages too as they’re built in the same way.

Thanks for your help.

Question:

Where do I submit feature requests? I’d still like to request that more advanced section dividers are built into the theme so that we can build these types of dividers natively with X Pro.

I’m sure the smart guys at theme.co will be able to make better functionality than what’s already available on the market.

Cheers

Dan

#4

Hi Dan,

Glad that we are able to help you.
You can open a forum thread with the feature you want in the next versions of our theme.
We will add that in our feature request list.

Thanks

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.