Invisible phone number on IPhone

oeilneuf74 · October 2015

Hi!

I installed and chosen the MEDIA BeTheme layout.

Under my contact form, I added a phone number. but the mobile version on iPhone including this number can not be seen except when I click on it.

I tried to change the color of my contact fomulaire bottom and the mobile version, I realized that the number was the same color as my first background.

I tried to change the color of the number but nothing happens.

Are there a problem with the phone numbers on IPhone?

Thanks for your help!!

Gaëlle

http://www.jurilia.fr/

Albert · October 2015

Hi,

please show us on screenshot which phone number is invisible because we do not see anything wrong on our side.

Thanks!

oeilneuf74 · October 2015

Hi!

tis is my screenshot: http://www.jurilia.fr/wp-content/uploads/2015/10/IMG_7482.png

Thanks. Gaëlle

Albert · October 2015

Ok, we got it now. So Apple devices, like iPhone are treating phone numbers as links to make a call and that's why are setting own colors. You can only wrap this phone number in span tag and try to set own color with !important declaration. Hope this will help you.

oeilneuf74 · October 2015

Hi!

thanks for your answer.

I put this in the column content:

[contact-form-7 id="2212" title="Contact form"]

</div>

[divider height="40"]

<p style="color: #635638; line-height: 20px; font-size: 14px;">Jurilia I Services juridiques I 74540 Chapeiry I France <br/> I[icon type="icon-phone"] 06 18 99 07 02 I [icon type="icon-mail"] <a style="color:#ffffff; href="mailto:"[email protected]">[email protected]</a></p>

how can I change the color with! important?

Thanks. Gaëlle

oeilneuf74 · October 2015

I put this :

in column content:

<p style="color: #635638; line-height: 20px; font-size: 14px;">Jurilia I Services juridiques I 74540 Chapeiry I France <br/> I[icon type="icon-phone"] <span class="numero"> 06 18 99 07 02 </span> I [icon type="icon-mail"] <a style="color:#635638; href="mailto:"[email protected]">[email protected]</a></p>

and this:

in custom CSS:

.numero {

color: #635638 !important;

}

but it doesn't work!!!

Albert · October 2015

This is what we exactly meant. But please replace your own css with below and all should be fine (for Apple devices such items are links even while they are not links in the code):

.numero a {
    color: #635638 !important;
}

oeilneuf74 · October 2015

Great!!!!!!!

Thanks a lot!!

Gaëlle

Albert · October 2015

You're welcome

Invisible phone number on IPhone

Comments