I have read in a few other posts that creating a tappable link for a phone number can be done with tel: in an anchor tag
I would like to implement this in a responsive website.. something like this:
<a href="tel://1-555-555-5555">Call Us! <span>(555) 555-5555</span></a>
(the span tag I plan to use to hide the phone# with CSS)
The idea is that on a desktop you will only see "Call Us! (555) 555-5555", but not be an actual link
But when we scale down to mobile, you will then see a stylized link that just says "Call Us!" that you can click.
I'm sure there is a way to accomplish this with JavaScript or JQuery... but is there anyway to accomplish this with CSS Media Queries?
Note: Visual styling is no problem.. just looking for a reasonable solution for the "switching" concept.
Thanks in advance!
I think your best bet would be to add an ID to your anchor tag and through your media query you can hide it on the desktop version there no need for the span.
Then for your non anchor text hide that when you are scaled down through another ID in a media query.