Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by samiawyatt
samiawyatt
5,269 Points

Wordpress- Phone number color changes when I view it on mobile device

Does anyone know why?

I am working on a website and I added the company's phone number below the logo on the header and also on the footer of every page.

I went on safari, chrome and firefox on desktop and the phone looks just fine but when I go on iphone and ipad it looks darkblue.

For the time being I just created a picture of the number and added it below logo and it looks ok, but the footer number it still looks dark.

This is the website www.worldspacer.org

Your input is highly appreciated!

Thank you, Samia W.

2 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

This should work:

<p class="phone">01202 529414</p>

.phone a, .phone a:link, .phone a:visited, .phone a:hover, .phone a:active, .phone a:focus {
  /* link styles go here, e.g.: */  
  text-decoration: none;
  color: white;
}

Even though you don't have an a tag in the html, when iOS makes the conversion it becomes a link.

samiawyatt
samiawyatt
5,269 Points

Yes. I figured that was the issue I just didn't know how to code it to change default link color but now I do thanks to you!

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Samia

This happens as iOS detects phone numbers and turns them into links that people can click to call them.

You can turn off the behaviour by adding this in your <head> section.

<meta name="format-detection" content="telephone=no" />

Alternatively if you add link styles to the element you can control the colour iOS will use.

This is not unique to WordPress and can happen (and be prevented) on any website.

samiawyatt
samiawyatt
5,269 Points

Thank you for your reply.

I would like the phone to stay as a link so users can click and call if they want. Can you tell me what code I need to insert to change color. Pretty please?