4

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>
Dekel
  • 57,326
  • 8
  • 92
  • 123
dan101
  • 53
  • 1
  • 6

5 Answers5

2

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

oguzhancerit
  • 1,333
  • 1
  • 14
  • 24
  • thanks for that! I hadn't realised they were covered because it seemed to be clickable when I was viewing on a desktop browser at mobile width. – dan101 Dec 11 '16 at 21:25
  • Thank you, saved a lot of time! In my case it was a div with flex layout which took enormous height in mobile. – olegiv Mar 23 '20 at 20:36
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.

Jeff
  • 308
  • 1
  • 8
2

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;
}
Shilwant Gupta
  • 119
  • 1
  • 3
0

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.

Pupil
  • 23,528
  • 5
  • 42
  • 64
0

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

greenhouse
  • 1,158
  • 13
  • 18