Jump to content

CANT UPDATE A TEXT BOXs COLOUR

Recommended Posts

Hello !!  Just wondering if anyone knows how to fix this issue - Basically in both SS views Desktop + Mobile the phone number for ELAINE is navy blue but when I check it on my actual phone it's grey with a link line underneath.  

None of the following have fixed the problem yet

  1. Ive deleted this multiple times and made a new text box
  2. I've copied and pasted TAMARA text box and inserted new text
  3. Changed it multiple times in the COLOURS EDIT PAINT BRUSH THINGY 
  4. restarted computer
  5. refreshed my phone 
  6. refreshed SS
  7. removed the 'LINK' which is making it grey.....

Any ideas would be greatly appreciated - site is going LIVE soon 🙂   PLEASE HELP 😆

Screen Shot 2023-02-01 at 4.16.53 pm.png

Screen Shot 2023-02-01 at 4.17.01 pm.png

IMG_84A3E40FEF52-1.jpeg

Link to comment

My first guess would be the browser is overriding/ignoring the CSS. Actual mobile devices often do these kinds of things to provide a consistent user experience.

The reason it works in the desktop browser mobile view is that it is just an emulation of a mobile environment, you are working on a computer, not an actual mobile device.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 2/1/2023 at 5:26 AM, spacecadetdigital said:

[In the mobile device preview window] the phone number for ELAINE is navy blue but when I check it on my actual phone it's grey with a link line underneath.  

Safari on iOS is designed to detect phone numbers on webpages and make them into links that call the number - even when you haven't added code to do this. It tries to be extra helpful 🙂. This link comes with Safari's own styling.

You should be able to override this by doing one of two things:

  • Use CSS to force the inherited styling
  • Add a meta tag to stop Safari detecting the numbers

You didn't provide a link to the site so I wasn't able to provide you with specific code tested on this site.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 6 months later...
On 2/3/2023 at 5:01 AM, paul2009 said:

Safari on iOS is designed to detect phone numbers on webpages and make them into links that call the number - even when you haven't added code to do this. It tries to be extra helpful 🙂. This link comes with Safari's own styling.

You should be able to override this by doing one of two things:

  • Use CSS to force the inherited styling
  • Add a meta tag to stop Safari detecting the numbers

You didn't provide a link to the site so I wasn't able to provide you with specific code tested on this site.

Did this help? Please give feedback by clicking an icon below  ⬇️

@tuanphan

Has anybody discovered any universal solution for this instead of targeting block/section IDs? Perhaps is there a way to find all tel: links and tell them to be a certain color? I'd like to make sure this doesn't occur as new pages are added and not worry about adding to a CSS override per every new section / new telephone link. Also helps if another website editor can easily pick up where I left off

Edited by thedowntowncreative
Link to comment
32 minutes ago, thedowntowncreative said:

Has anybody discovered any universal solution for this instead of targeting block/section IDs?

You can target tel links with the following CSS.

a[href^="tel:"] {

  color : red;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 months later...
On 8/11/2023 at 3:31 PM, thedowntowncreative said:

It looks to be working! Thanks so much

@creedon @paul2009 @tuanphan


Hi! This doesn't seem to work for me. I'd like the phone # at the footer to be #E84929 when viewed on iPhone (instead of red), so I tried this in Custom CSS:
 

a[href^="tel:"] {

  color : #E84929;
  
  }

Here's the site in question:


rosaliedho.com
rosa123

 

Thanks so much!

Edited by dokela
Link to comment
16 minutes ago, dokela said:

@creedon @paul2009 @tuanphan


Hi! This doesn't seem to work for me. I'd like the phone # at the footer to be #E84929 when viewed on iPhone (instead of red), so I tried this in Custom CSS:
 

a[href^="tel:"] {

  color : #E84929;
  
  }

Here's the site in question:


rosaliedho.com
rosa123

 

Thanks so much!

I'm not seeing a link with the 'tel:' prompt. Try setting a phone number with that link first. 
Highlight your text > select the link icon > put "tel:##########" > Click Apply > Save and Refresh and see what happens.

Mind you, putting:  a[href^="tel:"] { color : #E84929;  }

into CSS...has not always worked for me when viewing on an iPhone. iPhones think they are special like that.

If that's also the case for you, you could also try wrapping the command so it's exclusively for mobile: 
@media only screen and (max-width: 768px) {

a[href^="tel:"] { color : #E84929;  }
}

Edited by thedowntowncreative
Link to comment
20 hours ago, thedowntowncreative said:

I'm not seeing a link with the 'tel:' prompt. Try setting a phone number with that link first. 
Highlight your text > select the link icon > put "tel:##########" > Click Apply > Save and Refresh and see what happens.

Mind you, putting:  a[href^="tel:"] { color : #E84929;  }

into CSS...has not always worked for me when viewing on an iPhone. iPhones think they are special like that.

If that's also the case for you, you could also try wrapping the command so it's exclusively for mobile: 
@media only screen and (max-width: 768px) {

a[href^="tel:"] { color : #E84929;  }
}

This worked!!!! I'm thrilled. Thanks!

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.