- This topic has 9 replies, 3 voices, and was last updated 3 years, 3 months ago by Tom.
April 10, 2017 at 6:22 am #303992B
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.
ThanksGP Premium 1.2.96April 10, 2017 at 7:18 am #304015LeoStaffCustomer SupportApril 10, 2017 at 7:43 am #304028B
Link is here
ThanksApril 10, 2017 at 8:29 am #304041LeoStaffCustomer Support
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:
Let me know if this helps.April 10, 2017 at 12:03 pm #304158B
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.
ThanksApril 10, 2017 at 12:14 pm #304160LeoStaffCustomer SupportApril 10, 2017 at 7:16 pm #304277TomLead DeveloperLead Developer
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 #304474B
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 #304491B
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
- You must be logged in to reply to this topic.