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

Question

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>

Answer 1

Remove the code block below or display:hidden on mobile in your theme.

If you look on desktop browser using by mobile device toolbar, you will see the these elements fill the all page so your buttons stay behind of 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.

Answer 2

Please go in to your CSS and make this change.

.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}

To:

.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}

The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.

Answer 3

HTML links not clickable on mobile, but are clickable on desktop. I have one solution. Try this

Html

<a href="https://www.stackoverflow.com" class="goclick">

css

.goclick{
position: relative;
z-index: 9;
}

Answer 4

For this, go to Google Chrome > Developer tools .

Inspect the element, if it is being overlapped by anything, add clear: both;

to the overlapping element.

Actually, in my issue, it fixed everything.

Answer 5

for me, i had a class with...

z-index: -1

which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem

ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6