Phone call link in mobile version of an email - help

Question

I am struggling putting a mobile call link onto an image that works in the mobile version of the responsive email. Here is the email: Link

The image on the top with the phone number is the issue here. This is particularly that area:

The link works on mobiles where the desktop version is shown (for example Gmail app), but where the mobile version is shown the picture is not clickable at all.

Any ideas what can I do here?

Balint

Answer 1

Something you are doing with your CSS was getting in the way. The link you provided was not at all clickable in Chrome, Firefox, or Safari.

I dropped this piece of your code in an email:

<table width="100%" bgcolor="" border="0" bordercolor="" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="font-family:Arial; font-size:13px">
        <span id="logo">
          <a href="tel:800976004" target="blank" style="border-style: none;"> 
            <img src="http://image.crm.kaplaninternational.com/lib/fe9a13707567017e76/m/4/n.verde.jpg" style="display: block; margin: 0px; border-style: none;" alt="Kaplan Home Page" height="60" width="600">
          </a>
        </span>
      </td>
    </tr>
  </tbody>
</table>

And it worked immediately. I am able to click this on my mobile phone, and in all browsers.

After further investigation - you seem to have pointer-events:none in your CSS. I disabled that, and it seemed to work immediately as well.

The documentation on pointer-events

none The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

If that isn't required - I'd remove that and see if it works for you.