CODEWITHSUNDEEP
htmlcss
dan101
dan101

Reputation: 63

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

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:[email protected]"> <p style="background-color:white;padding:none;" class="call-button" id="email-button">  EMAIL US </p> </a>

</div>

Upvotes: 5

Views: 14996

Answers (5)

oguzhancerit
oguzhancerit

Reputation: 1572

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. enter image description here

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.

enter image description here

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. enter image description here

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.

Upvotes: 3

Shilwant Gupta
Shilwant Gupta

Reputation: 169

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;
}

Upvotes: 2

greenhouse
greenhouse

Reputation: 1281

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

Upvotes: 0

Pupil
Pupil

Reputation: 23948

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.

Upvotes: 0

Jeff
Jeff

Reputation: 291

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.

Upvotes: 2

Related Questions