Docs

[stevetheadi]

Hi

the telephone numbers on the first page of my website – http://www.broughtonschoolofmotoring.com/ – display correctly on every browser except Safari.

On that browser they appear very small and the wrong colour.

Can you advise?

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

a[href^="tel"] { 
    color: #fff; 
    font-size: 1.2em;
}

Let us know how it goes.

Cheers!

[stevetheadi]

Thanks.

I’m not using the “tel” prefix, just numbers.

Will this still work?

[Jade]

Hi there,

Try to add a class to the custom headline element where the telephone is added. Supposed the class name you have added is tel-no, then add this CSS in the customizer:

.tel-no { 
    color: #fff; 
    font-size: 1.2em;
}

Hope this helps.

[stevetheadi]

Hi guys

it’s still not working.

The numbers halfway down my home page look very small in Safari still.

Is it because they are written into a custom headline?

[Rue Nel]

Hello There,

Thanks for the updates! Most mobile browser will convert any phone numbers into a clickable links so that users can easily click on it and it will automatically open the call number. This is why even if you have inserted it as a headline and added a color, it has still a different color. I would suggest that you just totally make it a link. You can have this code instead:

<h4 style="text-align: center; font-size: 30px !important;"><a href="tel:07840055462" style="color: #2f5b87;font-size: 30px !important;">0784 0055 462</a> / <a href="tel:01652655986" style="color: #2f5b87;font-size: 30px !important;">01652 655986</a></h4>

Hope this helps.

[Author]

Posts