Gradient text not showing on mobile

[Peter789]

Hi there,

I am having issues with the headline gradient CSS not showing at all on mobile

[ruenel]

Hello Katarina,

Thanks for writing in! I cannot replicate the issue on my phone. This is what I am seeing:

Images in the secure note.

Please clear your phone’s browser cache and test the site again.

[Peter789]

Thanks for your reply,

Could you please delete the pictures above you attached? Since they’re private… thanks!

I have tried it on my iPhone via Safari browser, and Brave but the issue is still there…

I cleared the cache on both browsers… I am really confused

Kind regards,
Kate

[ruenel]

Hello Kate,

The images were in the secure note now.

It seems that your Linear-Gradient property is not fully supported with the mentioned browsers and in iOS. You can check it here:

• https://caniuse.com/?search=linear-gradient

This is why, it is also best that you will have to set the default color to white so that when the browser does not support it, it will still display the text nicely.

Hope this makes sense.

[prakash_s]

Hello Kate,

It requires custom CSS code, I would suggest you use this custom CSS code under the element CSS

$el .x-text-content-text-primary{
  background: radial-gradient(#eff1ff,#000 95%);
    background-position: 50% 75%;
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  
}  

The purpose of providing custom CSS is 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 or in case if you have no idea about the coding you can subscribe to the One where customization questions are answered.

Hope it helps.
Thanks