Jump to content
Sign in to follow this  
Keith Vaugh

Font colour phone number mobile devices

Recommended Posts

Keith Vaugh

Hi Folks

 

I this code in a morefont column:

<address>
<strong>MAGVA Design + Letterpress</strong><br>
Ballyclare, Ferbane, Offaly, Ireland<br>
<abbr title="Phone">t:</abbr> <span style="color: #ffffff;" >(087) 123 456</span>
</address>

Its working fine on a desktop, however on mobile devices the Phone font colour is hidden (same colour as the background in the footer). Is there any method of forcing the phone colour on mobiles?

 

Thanks

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Can you provide a link to the site in question, so we can take a closer look.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Keith Vaugh

Hi Danny

 

Site is still locked down for development. Hope to make it live in the next few days. If you still have the PM from a few days ago, its the same site. 

Share this post


Link to post
Share on other sites
Danny

I have just viewed the site in question and I am not seeing what the issue is?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
anthalis

Hi Keith, 

 

The issue could be caused by the fact that, in certain formats - if not all, on mobile devices the phone numbers are converted to links. Since you didn't make the phone number a link yourself, you don't exactly have a good way of controlling the output. 

 

Try making the phone number a link in your code, instead of a span:

<a class="my-phone" href="enter phone no. here"> Phone number </a> 

Then style the link to your liking: 

a.my-phone {
color: #ffffff;
}


OR 

a.my-phone {
color: #ffffff !important;
} 

You can get even more specific with 

address a.my-phone {
color: #ffffff !important;
}

to target only my-phone links in <address>...</address>

  • Like 1

Share this post


Link to post
Share on other sites
Rob

Thanks Anthanlis.  That's what I would have said!  :D


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
anthalis

Got here first :D 

 

Let's see if that solves the problem. 

Share this post


Link to post
Share on other sites
Keith Vaugh

Thanks for the reply anthalis. You understand the problem perfectly.

 

While the method works for changing the colour, it doesn't attempt the dial the number when on a mobile. I'd like to maintain that functionality. 

Share this post


Link to post
Share on other sites
anthalis

Hi, 

 

I think it's a matter of number format. See if it works when you remove the brackets, add the international calling code, etc. 

Share this post


Link to post
Share on other sites
Keith Vaugh

It just keeps treating it as a URL. Tried all combinations that I can think of.

Share this post


Link to post
Share on other sites
James B

Hi Keith

 

Try entering in this format

<a href="tel:8005551212">800-555-1212</a>
  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×