CANT UPDATE A TEXT BOXs COLOUR

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 😆

Squarespace are baffled - they're looking in to it 🙂 

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.

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  ⬇️

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

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.

7 hours ago, creedon said:

You can target tel links with the following CSS.

a[href^="tel:"] {

  color : red;
  
  }

Let us know how it goes.

It looks to be working! Thanks so much

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!

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;  }
}

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!