[Resolved] Link color for phone number on mobile

[B]

Hi Tom,

Thanks for the great theme!

I’m working on a site which has a phone number in the header widget section (as text box). I’m using CSS to style the colour of the text, which works fine on desktop, but on mobile the colour is changed to black. I’d like to change this on mobile to show as the conventional blue link colour (so it’s clear to visitors they can click on the number to dial). Please advise how to achieve this.

I’ve searched through a number of the other threads here but couldn’t find anything addressing this question – apologies if I missed it.

Thanks

[Leo]

Hi there,

Can you provide a link to your site by any chance? Thanks!

[B]

Hi Leo,

Link is here

Thanks

[Leo]

Hmm the color of phone number looks the same (#777) to me?

You could also insert the phone number as HTML link so people can click on it:
<a href="tel:1-847-555-5555">1-847-555-5555</a>

Let me know if this helps.

[B]

When I view on desktop, I see color #777 as required, but on mobile it changes to black (presumably because it automatically becomes a link on mobile and link colour of black is assigned somewhere / somehow)??

I only want it to appear as a hyperlink in mobile view, not desktop view… so I don’t think inserting href will give the desired effect… unless there’s a way to insert href for certain screen sizes only?

I was using the Mantle theme previously and it all worked as I expected… it was when I changed to the parent GP theme that the link colour changed.

Thanks

[Leo]

That’s strange. This is what I see from my phone: https://s16.postimg.org/ppq5nqz4l/IMG_5283.png

Maybe try clearing browser cache?

[Tom]

The phone number is never linked for me whether on desktop or mobile, so I’m always seeing it as the regular text color.

You can show two different divs, one for mobile and one for desktop:

<div class="hide-on-mobile hide-on-tablet">
    Desktop phone number in here - no href
</div>

<div class="hide-on-desktop">
    Mobile phone number in here - with href
</div>

[B]

Great, thanks Tom. I’ll give that a go.

Incidentally, I’m only getting the black link color for mobile in Safari, which seems to automatically create a link for the phone number. In Chrome, it’s just shown as text (mobile and desktop) without any link.

[B]

I’ve added some CSS which seems to have done the trick… link color is now the same on Safari & Chrome.

Thanks for your help.

[Tom]

Glad you got it working 🙂

[Author]

Posts