Mobile clickable phone number Wordpress footer

Question

I want to add clickable mobile number to footer,ie smart phone users can directly call from footer when they click number .

I tried

<a href="tel:+15555551212">15555551212</a>

but when i click it in my lap top a blank page is opening

https://website/tel://+15555551212

Is there any way to prevent this in desktop device and only for smart phones?thanks in advance

Answer 1

You can achieve this useing css, you need to write two different code 1 for desktop and another one for mobile with different class :

HTML code in footer:

<div class="on-desktop">
      <a href="#">15555551212</a>
</div>
<div class="on-mobile">
     <a href="tel:+15555551212">15555551212</a>
</div>

And CSS code in style.css or customizer :

 @media only screen and (max-width: 600px) {
  .on-desktop {
   display:none;
  }
 .on-mobile {
   display:block;
  }
}

@media (min-width: 1025px) and (max-width: 1280px) {

  .on-desktop {
   display:block;
  }
 .on-mobile {
   display:none;
  }

}