Adding phone button and menu text for mobile viewing

Some mobile phones do this automatically on any number that looks vaguely like a number that can be dialled. (It’s very irritating and I wish they wouldn’t!)

However, on a real number, you can use tel:

<div class="call-us">
<a class="btn" href="tel:123 4567890">Call us on 123 4567890</a>
</div>

Figuring out whether users are on a mobile phone (rather than a small browser window) is tricky. I think it would require javascript.

The site you link to doesn’t actually do this. They simply display the button only when the screen size is small. You can do this by adding the following to your Custom CSS / child theme:

@media (min-width: 480px) {
	.call-us {
		display: none;
	}
}

This styles the “call-us” div so that it doesn’t display on screens wider than 480px. You can change this to the size you want.

Some mobile phones do this automatically on any number that looks vaguely like a number that can be dialled. (It’s very irritating and I wish they wouldn’t!)

For anyone who wants to switch this off, I’ve found that 0123456789 will get “recognized” as a phone number in iOS, but <span>01234<span></span>56789</span> will not. The number with the <span>s in it looks unchanged on the page and is no longer a link.

<div class=”call-us”>
Call us on 123 4567890
</div>

does this code go into CSS or on the page itself wher eyou wrote the number?

thanks