› ›

Header phone number size difference on iphones vs android

celibrecelibre
in HealthCentre
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!

http://celibre.com/
Tagged:

Comments

  • akhileshakhilesh
    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 
  • celibrecelibre
    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!
  • celibrecelibre
    here are the screenshots of how they appear on an android and iphone. Android pic is with large orange phone.
    celibre-android.png
    725K
    celibre-iphone.png
    333K
  • celibrecelibre
    The images above have the coding you suggested in the custom css box.
  • celibrecelibre
    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>
  • celibrecelibre
    modified in the header.php file
Sign In or Register to comment.