Help changing phone number text color for mobile display

  • Author
    Posts
  • #105811

    valorappraisals
    Member
    Original poster

    Hi, I am having trouble with a phone number not being readable in mobile view, because the color (gray) blends with the background image.

    How can I change the display color?

    Images of readable web view, and unreadable mobile view: https://cloudup.com/chmZ3cx0ojb

    (PS formatting is a bit weird on the phone # because I was playing with formatting to get a temporary fix to the issue, unsuccessfully.)

    Thank you!

    The blog I need help with is: valorappraisals.com

    #105952

    anarieldesign
    Theme Author

    Hi valorappraisals,

    i just checked your website on my mobile and the phone number is also white. Can you please let me know if you menage to make it on your own or you still need help with.

    All the best,
    Ana

    #106009

    valorappraisals
    Member
    Original poster

    Hi Ana, I still need help. It shows as gray on my phone and several others. All are iphones, if that matters. Is this something we can change in the CSS?

    #106011

    anarieldesign
    Theme Author

    Hi valorappraisals,

    can you please let me know if this happening on iOS, iPhone? iOS detects phone numbers and turns them into links that people can click to call them so maybe this is the issue.
    You can for example add class just for the phone number:
    <span class="phone">01202 529414</span>
    and in Custom CSS:

    .phone a, .phone a:link, .phone a:visited, .phone a:hover, .phone a:active, .phone a:focus {
      text-decoration: none;
      color: white;
    }

    or add this:

    .homepage .cd-main-content a, .homepage .cd-main-content a:hover {
    color: #fff;
    }

    On my Windows phone I see the same as on the bigger screens, the number is white.

    Let me know if this helps.

    All the best,
    Ana

    #106099

    valorappraisals
    Member
    Original poster

    Yes, it is happening on an iphone. Thanks for the CSS tips. I’ll try that and see if it corrects the issue. :)

The topic ‘Help changing phone number text color for mobile display’ is closed to new replies.