HTML links not clickable on mobile, but are clickable on desktop

Issue

I am having trouble with two buttons at the top of my mobile site www.thefriendlydentist.ie

They are clickable on desktop but on mobile I get no response?

The html is placed in the header of the WP theme.

<div id="topcontact-2" style="background-color:white;">
<a href="tel:012863787"><p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p> </a>
<a href="mailto:info@thefriendlydentist.ie"> <p style="background-color:white;padding:none;" class="call-button" id="email-button">  EMAIL US </p> </a>

</div>

Solution

You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.

If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.

- Option 1: remove overlapping elements

- Option 2: use z-index to manage them.

<div class="mobile-bg-fix-img-wrap">
    <div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>

You can see in image how above elements fill the page.

How Z-Index Works?

All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.

In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:

red square z-index:10

blue circle z-index:56

white square z-index:985

in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative

To deep dive, please check the z-index documentation.

How to Activate Mobile Toolbar on Chrome?

Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.

Below image will guide you to how to activate mobile toolbar on Google Chrome.

Other Possibilites For The Problem

1. Javascript Blocking

Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.

<a href="https://www.google.com" class="prevent-click">Non-clickable Link</a>

Using JQuery

<script>
    $(".prevent-click").click(function(){
        return false;
    })
</script>

Using Javascript

document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
  event.preventDefault();
  return false;
});

Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.

1. Open Developer Console
2. Go to Settings - right top corner of the inspection tool
3. Check the box (Disable Javascript)
4. Refresh the page.

Answered By - oguzhancerit