Phone Number disappears on Mobile Devices

DMONAHAN · July 2015

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 www.gellergraphics.com and please see issue on the mobile device. I have iPhone and thats where the issue happened at the moment.

Albert · July 2015

Hi,

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

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.

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.

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.

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

Phone Number disappears on Mobile Devices

Comments