Jump to content

HTML Text not showing correctly on mobile

Recommended Posts

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: 

On Desktop

 

And here is how it shows on mobile: 

IMG_0049.thumb.PNG.ecad852822c74fbdbc0ab892c34f9960.PNG

 

Any help with what is going wrong is greatly appreciated!

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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: 

On Desktop

 

And here is how it shows on mobile: 

IMG_0049.thumb.PNG.ecad852822c74fbdbc0ab892c34f9960.PNG

 

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?

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.