Happy Halloween! Get 20% off GP Premium with the discount code: HALLOWEEN20

[Resolved] Link color for phone number on mobile

Home Forums Support Link color for phone number on mobile

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #303992
    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

    GP Premium 1.2.96
    #304015
    Leo
    Staff
    Customer Support

    Hi there,

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

    #304028
    B

    Hi Leo,

    Link is here

    Thanks

    #304041
    Leo
    Staff
    Customer 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:
    <a href="tel:1-847-555-5555">1-847-555-5555</a>

    Let me know if this helps.

    #304158
    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

    #304160
    Leo
    Staff
    Customer Support

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

    Maybe try clearing browser cache?

    #304277
    Tom
    Lead Developer
    Lead 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>
    #304474
    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.

    #304491
    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.

    #304536
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.