Weird Lines Displayed on Curved Sections

We have a client who is experiencing ‘weird lines’ on certain mobile devices, on curved sections only (see screen shot). I have not been able to duplicate this issue on my new iPad or iPhone devices and am wondering if this is due to older device/browser compatibility?

Here are the device details:

iPad 5th Generation
iPad iOS 14.6 (up to date)
Safari version 14
Google Chrome version 91.0.4472.80

Thank you!

I apologize, here is the link to the site:

Hello @tkcostello,

Thanks for writing to us.

For the quick fix you can use this custom CSS under the Pro—>Theme Option—>CSS.

span.x-separator-top-curve-in {
    transform: translate(0, -98%);

If it doesn’t work for you, please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.

I have tried adding the CSS and that did not fix the problem. Sending a Secure Note now…

Hey @tkcostello,

Thank you for providing the credentials. Try adding the following code in the Theme Options > CSS:

[class*=x-separator][class*=top] {
    top: 5px !important;

Don’t forget to clear all caches including your browser’s cache after adding the code.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Let us know how this goes!

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