How to style a phone number for desktop and mobile?

Hi

I want to have a phone icon by a phone number like loans hub have in the top right corner. Should I create the icon as a gif on a transparent background, then put the icon and html tel number inside a div, like loans hub have done?

The reason I ask is because on desktop, tablet etc, I don’t want the phone number to be clickable, just on mob. So I’m wondering what the best way to create this is in webflow.

Thanks…Graham

If you write a phone number as a text, and not as a link, it will not be clickable on desktop, but most likely phones with iOS and Android will find out it’s a phone number and make it clickable.

But:

  • it’s maybe only a matter of time before desktop browsers spot it as a
    phone link to and propose actions on it, it could happen during an
    update, overnight (but I think not in the immediate future. Safari
    could do it soon when you’ve hooked up an iPhone to OS X, allowing to
    click on desktop and take the call on the iPhone or on OSX through
    the iPhone)
  • on mobile, the phone number may take a style that you don’t control.

Now for your icon, you’re right: set a div with round corners 50%, type and style your text (number) inside it, add a 25px or so of left padding, and add the GIF, SVG or PNG icon as a background, with non repeat, and position it as desired. I suggest using SVG, most icon banks have SVG versions of icons. You can get one for free on www.nounproject.com for example.

You can also style a phone number in a text, inline, by selecting the number, clicking on the brush icon, giving a class to the created span element, and repeating the procedure above: left padding and icon as background no-repeat.

Now there’s a specific HTML code for phone numbers. It’s <a href="tel:18475555555">1-847-555-5555</a> and Webflow allows you to set it in the UI (click on the phone icon in link properties). It will allow everyone with appropriate setup to catch those links (Skype, SIP clients (telephony over IP)… or OS X with an iOS device hooked to it (using the Facetime app). The “tel:” property doesn’t always work, sometimes the “callto:” property works better.

http://vincent.polenordstudio.fr/snap/ty4v9.jpg

Here’s the “tel:” property in action, see what it does on your desktop computer: 1-847-555-5555 (On Safari OS X it shows as a link but clicking does nothing, I don’t have any software taking up the link on this computer apparently)

So there’s apparently nothing perfect you can do with only HTML. With the help of Javascript, it’s possible to detect wether you’re on a mobile browser or not and to transform the link accordingly. A quick search brings http://detectmobilebrowsers.com/ but there are I guess many other ways to do it.

Also, depending on how you write your number, it will have various results when automatically catch by mobile browsers. Here’s a test result I found there:

  • 555-5555 (iPhone Only)
  • (555) 555-5555 (Android + iPhone)
  • +1 (555) 555-5555 (iPhone Only)
  • 555 5555 (iPhone Only)
  • 555 555 5555 (Android + iPhone)
  • +1 555 555 5555 (iPhone Only)
  • 555.5555 (iPhone Only)
  • 555.555.5555 (Android + iPhone)
  • +1 555.555.5555 (iPhone Only)
1 Like

Hi @vincent

Thanks so much for taking the trouble to explain everything so clearly. I’ll give it a go now and let you know how I get on.

Thanks again.

Graham

1 Like

You’re welcome. I’m sure I missed some aspects of phone number linking. If you find important info, come back and add it to the discussion :smile:

I will do, just going through it now.

Graham

Hi @vincent

I got that working ok on a nav link, thanks. I’m wondering if the phone number and icon might stand out more though just on a div to the right of the nav menu. I want to create something like the 4 lines of text and number on the top right of the header (Call For A Free Quote etc) on this page

The problem I’m having is getting the div (that I want to place my 4 lines in) to move to the right of the nav menu. I’m floating it right but it’s still below it. Any ideas how I fix this?

Here’s my share link

Thanks

Graham

Hi @GrahamCox, take a look at my little video, I hope this helps :smile:

Cheers,
Dave

Hi @cyberdave

Thanks so much for taking the trouble to create this for me. All makes perfect sense, I’m implementing it now, cheers.

Graham

Hey @vincent, so you were completely right that

on mobile, the phone number may take a style that you don’t control.

Currently the phone number on my page on mobile is significantly bigger in font size than it should be, is there a way for me to fix this?

<meta name="format-detection" content="telephone=no">

May only work for iOS though.

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

Where do you paste this code? I know stupid question, but I can’t figure out.

Go to your projetc dashboard, custom code tab, then in the Head box.

Yes, ! it worked!! thanks! (that’s how I know nothing about code…) 1st lesson learned…!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.