Archived topic

Link color for phone number on mobile

9 replies · Started by B on April 10, 2017

Viewing posts 1–10 of 10

April 10, 2017 at 6:22 am #303992

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

April 10, 2017 at 7:18 am #304015

Hi there,

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

April 10, 2017 at 7:43 am #304028

Hi Leo,

Link is here

Thanks

April 10, 2017 at 8:29 am #304041

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.

April 10, 2017 at 12:03 pm #304158

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

April 10, 2017 at 12:14 pm #304160

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

Maybe try clearing browser cache?

April 10, 2017 at 7:16 pm #304277

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>

April 11, 2017 at 7:15 am #304474

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.

April 11, 2017 at 8:01 am #304491

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.

April 11, 2017 at 9:26 am #304536

Glad you got it working :)

This archived topic is closed to new replies.

Start building better websites today.