HTML Text not showing correctly on mobile

Site URL: https://www.lydia-cottrell.com/#follow

I have used a code injection and HTML to create a gradient text effect. It works perfectly on desktop but for some reason a part of it disappears when on mobile. I can't work out at all why this is.  

This is the code I have used: 

<h2><center>
  <span class ="colourful"> Lydia Cottrell</span>

Here is how it looks on desktop: 

And here is how it shows on mobile: 

Any help with what is going wrong is greatly appreciated!

30 minutes ago, lidyaaC said:

Site URL: https://www.lydia-cottrell.com/#follow

I have used a code injection and HTML to create a gradient text effect. It works perfectly on desktop but for some reason a part of it disappears when on mobile. I can't work out at all why this is.  

 

This is the code I have used: 

<h2><center>
  <span class ="colourful"> Lydia Cottrell</span>

Here is how it looks on desktop: 

 

And here is how it shows on mobile: 

 

Any help with what is going wrong is greatly appreciated!

I 've checked that it is working properly on my device

Have you figured out on your own?

@bangank36 That is so strange, for me it still shows wrong and on my husbands phone, we are both on iphone but different models. 

1 hour ago, lidyaaC said:

@bangank36 That is so strange, for me it still shows wrong and on my husbands phone, we are both on iphone but different models. 

Which phone and browser are you using?

14 minutes ago, bangank36 said:

Which phone and browser are you using?

I am using an iphone 12 and safari? 

9 minutes ago, lidyaaC said:

I am using an iphone 12 and safari? 

Try adding to Home > Design > Custom Css

.colourful {
  -webkit-text-fill-color: rgba(0,0,0,0.0001);
}

Let me know how it works on your site

1 hour ago, bangank36 said:

Try adding to Home > Design > Custom Css

.colourful {
  -webkit-text-fill-color: rgba(0,0,0,0.0001);
}

I have tried this and it hasn't worked? Could it just be something to do with safari on ios? 

22 hours ago, lidyaaC said:

I have tried this and it hasn't worked? Could it just be something to do with safari on ios? 

Try adding again it with the important

.colourful {
  -webkit-text-fill-color: rgba(0,0,0,0.0001) !important;
}

Hope that it can help