Hi
I have noticed an issue where I am unable to add and style the color of underlined text for mobile, what is odd is that it works fine on desktop (using staging site) however when i access the staging site via mobile browser the underline does not even show up.
Not sure if this is a skill issue or a bug which is why I have posted it here.
I can force it to show up on mobile by using the “u” tag, but even then you cannot seem to style it a different color from the text
I have the text enveloped in a span tag with a class (this is inside of a heading element, but also same issue inside of rich text/basic text elements also)
<span class="underline-primary">HR</span>
I then style it with
.underline-primary {
text-decoration: underline var(--primary-color);
}
Now this works fine for desktop. I have tried it putting it in custom css section inside of the editor and also in the css section under settings. But neither works for mobile.
Not sure if I am misunderstanding something to do with css compatibility, but as far as I’m aware I believe this should show up on mobile browsers as i have checked on caniuse.com
It is odd as it shows on desktop when I am editing the site just not when I access the staging site from a mobile device.
- I have used Chrome, Safari and Brave browsers on desktop and mobile, IOS is up to date and so are the browsers
- I have flushed the cache from the litespeed plugin and also cleared cache from all of the desktop browsers and mobile browsers.
- I’ve turned off the litespeed plugin (only this metabox and a hostinger plugin is normally active and they are the only ones installed)
- I have looked at the similar topic
(https://forum.bricksbuilder.io/t/solved-text-decoration-underline-not-working-on-canvas/17827), however it’s not exactly the same as my issue as the underline and underline colors show fine in the canvas and the frontend for desktop - I’ve also tried using !important
- & tried using inline styling too
Not sure if it is just not possible on mobile, which, fair enough, or if I am misunderstanding something
TLDR: underline and underline color styling showing on desktop via bricks on staging site (canvas and frontend) however the underline disappears when checking staging site via mobile browsers
Thanks for your help
Jalex