• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 308
  • Last Modified:

modify tel attribute with css media query

Hi - we have the following in a responsive email:
<a href="tel:1-xxx-xxx-xxxx">1-xxx-xxx-xxxx</a>
Works great, but folks getting the email through their desktop outlook client get an "Access Denied" popup. Is there a way to have the tel protocol only display using media queries?
  • 2
  • 2
1 Solution
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
For an email, I think you are best to keep as normal text.  Phones typically can distinguish the  format of your number and create the link automatically.
Use a conditioned script to assign different attributes on different media.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I was not sure if media queries were fully supported but from one tester it looks supported enough http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails and even mailchimp shows it is a go http://templates.mailchimp.com/development/media-queries/ as long as you mark those styles as !important since most of your css should be inline.

With that in mind what you can do is have two versions of the phone and hide just one as needed.

<style type="text/css">


    @media only screen and (max-width:480px){
<span class="phoneMobile"><a href="tel:1-xxx-xxx-xxxx">1-xxx-xxx-xxxx</a></span><span class="phoneDesk">1-xxx-xxx-xxxx</span>

Open in new window

seanpowellAuthor Commented:
Thanks padas - much appreciated!
seanpowellAuthor Commented:
@ HagayMandel - sorry, can't use scripting in an email and as such required a css solution. Thanks for taking the time!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now