Phone Number disappears on Mobile Devices

Comments

• Albert

  July 2015

  Hi,
  
  where the phone number exactly is? Because we do not see it even on desktop.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• DMONAHAN

  July 2015

  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.
  
• Albert

  July 2015

  This is how "Contact" page looks like on mobile http://pasteboard.co/20b7PhTd.png and as we see, phone number is visible.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• DMONAHAN

  July 2015

  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: http://pasteboard.co/20dzUFkz.png. 
• Albert

  July 2015

  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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• DMONAHAN

  July 2015

  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">

  <style>

  p {

    margin-top: 0em;

    margin-bottom: 1.25em;

    padding-bottom: 25px;

  }

  h3 {

  font-style: normal;

  font-variant: normal;

  font-weight: 700;

  }

  </style>

  
  

  <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"]

  
  

  </div>

  
  

  
  

  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%; }

  }

  
  

  Thanks. 
• DMONAHAN

  July 2015

  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. 

  
  
• Albert

  July 2015

  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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next