Hi @alathea9,
Thank you for reaching out.
In your custom CSS, I found what’s causing the line through your “Beyond Quantum” heading. Your custom CSS has this rule:
.outlined-heading {
-webkit-text-stroke: 1.5px #6600cc;
color: #fff;
}
The -webkit-text-stroke line draws the purple outline around your heading text. On its own, this works fine everywhere, but the issue only appears when it’s combined with the bold styling your heading uses.
This sometimes shows up on iOS browsers due to how they render bold, outlined text, creating the visible seam you’re seeing. Here’s a screenshot for reference: https://share.zight.com/6qugDWld
To resolve this, update this custom CSS in your theme Customizer > Additional CSS to this:
.outlined-heading {
-webkit-text-stroke: 1.5px #6600cc;
paint-order: stroke fill !important;
color: #fff;
}
Here’s a screencast showing the result once this update is applied:
https://share.zight.com/nOuZWw0N
I hope this helps.
hi @chieze
thanks for your reply and suggestion. Are you from Kadence support?
Your solution does remove those intersecting lines, but there is one major problem – it removes the purple outline completely, which is is not what I want. I want to have the title both bold and with an outline.
I was working just fine on all devices for few months until now, so the code is not the issue. The only thing that happened is that I recently migrated my website to a new host by copying the whole cpanel.
This should not affect the behaviour of the plugin.
I need a solution that will fix those intersecting lines in mobile views while preserving the outline.
thanks
