Header phone number size difference on iphones vs android

Hello, I'm using the health center pro version and am having an issue when someone with an iphone looks at our page and the toll free number on top displays as a small black font, but when you view it on an android phone, it displays correctly the way I set it up (much larger text size and orange in color). Anyone know a fix for this? Much appreciated! Thanks!



  • Hi

    For this add the below css code into the Appearance <<  Customizer << Header setting << Custom css box . 

    @media only screen and (max-width: 767px) and (min-width: 480px) { 

    .head_cont_info li {
        font-size: 15px ! important;
    color: #f24a03 ! important;

    @media only screen and (min-width: 768px) and (max-width: 959px) { 

    .head_cont_info li {
        font-size: 20px ! important;
    color: #f24a03 ! important;

    Change font and color value as your need  .

  • Thanks for the help! The coding didn't change anything on an iphone. Phone number is still black and the size is still the same small font. Any other suggestions? Thanks!
  • here are the screenshots of how they appear on an android and iphone. Android pic is with large orange phone.
  • The images above have the coding you suggested in the custom css box.
  • I found a fix. I just used an image with a <a href phone tag. Now displays fine on both android and iphones. Thanks for the help!
    <a href="tel:8881111111"><img src="" width="" height="" align="middle" alt="" border="0" /></a>
  • modified in the header.php file
Sign In or Register to comment.