Phone number IOS

[JeffBramen]

Goodday,

I used a three colomn Contact Page Section and change the font colour. All works fine however the phonenumber does not show on IOS devices. I got a work around in place putting the Phone number in between ”. How to resolve this proporly?

<h3 class=”label”><span style=”color: #5a3000;”>Contact</span></h3>
<span style=”color: #5a3000;”>Telefoon: 06 451 41 988</span>

[Veena]

The above code seems fine.
Can you pls share a link to the specific page?

[JeffBramen]

This reply has been marked as private.

[Veena]

I can see a little alighment issue in Contact section other than that everything looks good.
Pls remove the extra left angle bracket close to span style that will wipeout the alignment issue.

[JeffBramen]

Check, lost the bracket. Problem not solved. In IOS the Phone number colour is white. All other browsers the Phone number turns up the #color I’ve put in. Changes all color settings I could find in the primary theme menu withour any luck. Put in the ‘ ‘ work around again.

[Veena]

It is difficult to suggest something without seeing the previous contact form.

[JeffBramen]

Excuse me. the work around as well as the original are in.

[Raghavendra]

I copied the source from your page to another test page of ours and things look fine even without the quotes on Safari on iPhone. Without quotes, the numbers are getting converted into a phone number and Safari prompts if the user wants to call that number – which is nice.

Strangely, on your site, the phone number goes missing when you do not have quotes. Can you pls share a temp login to the site so that we can make some changes and check exactly what is happening. Thanks.

[JeffBramen]

This reply has been marked as private.

[JeffBramen]

Goodday,

Any news on this?

Thanks,

Jeff

[Raghavendra]

Sorry this took some time. The following Custom CSS resolved it –

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

a[href^=tel]:focus, a[href^=tel]:hover {
text-decoration:inherit;
color: red !important;
}

Pls change the color as per your need. Looks like iOS safari inherits the color of phone number inherits from from anchor element which has been set color pink which is same as background color and hence the number was not visible. Now with the custom CSS you can control the color. This page helped debug the issue –

http://stackoverflow.com/questions/3736807/remove-styling-of-telephone-numbers

[Author]

Posts