Phone Number disappears on Mobile Devices

Hi.  Is there a way to control the mobile hyperlink as its looks like it disappears, but when I look closely the hyerlink turned blue that blending in with the background.  The font is right. Is there a CSS that I can add on this particular page?  The website is and please see issue on the mobile device.   I have iPhone and thats where the issue happened at the moment. 


  • Hi,

    where the phone number exactly is? Because we do not see it even on desktop.
  • Sorry - its on the contact page as part of the text copy before the filling out the form. 

    Reach out today at (908) 578-1452 or email using the form below.
    Get ready to enjoy a fresh spin on a very old craft.
    Of course, references are always available upon request.
  • This is how "Contact" page looks like on mobile and as we see, phone number is visible.
  • What phone are you using? It appears on my iPhone 4s for a few seconds, but then disappear (turns blue to allow you to click to call, but the blue matches the background blue).  However, on iPhone 5 and up it doesn't even appear when go to the page. As you can see here:
  • We use iPhone 5. But we checked this on few different devices and looks like it works on some and is invisible on other. We recommend to remove your custom css and deactivate plugins to check if one of them is not a problem. Also please sort your styles. For p tag, inside which this phone is, you got declaration and you forgot to use ; after !important tag and this could be the reason as well.
  • I am confused.  I tried removing the custom css and that was no change.  

    This is my column code and text and I have the !important included. 
    <div class="about_box">
    p {
      margin-top: 0em;
      margin-bottom: 1.25em;
      padding-bottom: 25px;
    h3 {
    font-style: normal;
    font-variant: normal;
    font-weight: 700;

    <h3><a style="color: #94AFD7;">SEND US A MESSAGE</a></h3>

    <p style="color: #FFF !important">Reach out today at (908) 578-1452 or email using the form below.<br>Get ready to enjoy a fresh spin on a very old craft.<br>Of course, references are always available upon request.</p>

    [contact-form-7 id="110" title="Contact page"]

    [hr height="20"]


    Here is my custom CSS that I have on the page: Should there be something there to add? 
    .about_box { margin: 30px 4% 0 0; }

    @media only screen and (max-width: 767px) {
    .about_box { margin: 30px 10% 0 10%; }

  • I figured it out.  It needed a custom CSS code for iphone users.   For your reference this is the CSS code to add. 

    a[href^=tel] { color: inherit; text-decoration: none; }

    Thanks for helping when could. 

  • This is really weird and to be honest we thought that something else happen because phone display on some mobile devices and on some not. So this css must work because something else was changed for sure. We're glad to see that you found it and it works.
Sign In or Register to comment.