CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome
Black
Black

Reputation: 20252

Links are only working on desktop but not mobile

We have a slider on our homepage which is working just fine on desktop view, but nothing happens on smartphone or tablet view.

If I open the developer console and switch to a smartphone view, then nothing happens on click. (You might have to reload the page a few times until the bug will be noticeable)

This is the slider I am talking about:

enter image description here

Website: https://www.blizz-z.de/

<div id="homeslider-revolution" style="overflow: visible;">
    <div class="revolution-slider revslider-initialised tp-simpleresponsive" id="revslider-227" style="height: 222px;">
        <ul style="display: block; overflow: hidden; width: 100%; height: 100%; max-height: none;">
            <li data-transition="fade" data-slotamount="1" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1;"><a href="/aktionen"><img src="/media/wysiwyg/slider/blizz-z-hp-slider-bauplattenmailing-19.jpg" alt="Jet Bauplatten mit satten Rabatten"></a></li>
            <li data-transition="fade" data-slotamount="1" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1;"><a href="/produkte-bewerten"><img src="/media/wysiwyg/slider/blizz-z-hp-slider-bewertung-19.jpg" alt="Produkt bewerten &amp; Überraschung erhalten"></a></li>
            <li data-transition="fade" data-slotamount="1" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 18; opacity: 1;"><a href="/newsletter-bestellen"><img src="/media/wysiwyg/slider/slider-newsletter/newsletter-bestellen-de.jpg" alt="Newsletter abonnieren"></a></li>
            <li data-transition="fade" data-slotamount="1" style="width: 100%; height: 100%; overflow: hidden; visibility: visible; left: 0px; top: 0px; z-index: 20; opacity: 1;"><a href="/anwendungstechnik/abdichtungsnormen.html"><img src="/media/wysiwyg/slider/slider-abdichten/abdichtungsnormen.jpg" alt="Abdichtungsnormen"></a></li>
        </ul>
        <div class="tp-loader" style="display: none;"></div>
        <div class="tp-bannertimer" style="visibility: hidden; width: 83.8696%; overflow: hidden;"></div>
    </div>
    <div class="tp-bannershadow tp-shadow1" style="width: 820px;"></div>
    <div class="tp-bullets simplebullets round hidebullets" style="bottom: 6px; left: 50%; margin-left: -39px;">
        <div class="bullet first"></div>
        <div class="bullet"></div>
        <div class="bullet"></div>
        <div class="bullet last selected"></div>
        <div class="tpclear"></div>
    </div>
    <div style="position: absolute; top: 170px; margin-top: -22px; left: 0px;" class="tp-leftarrow tparrows default hidearrows"></div>
    <div style="position: absolute; top: 170px; margin-top: -22px; right: 0px;" class="tp-rightarrow tparrows default hidearrows"></div>
</div>

enter image description here

The z-index of the highest slider is 20, while the others is 18. There is no other element above the slider image which blocks clicking.

It does not work in Chrome and FireFox but it works on Apple iOS browser. I am running out of ideas and start to think that this is a browser bug

Update:

enter image description here

I am using Chrome Version 75.0.3770.142 (Offizieller Build) (64-Bit)

I made a bug report.

Upvotes: 1

Views: 3118

Answers (3)

shah faisal khan
shah faisal khan

Reputation: 31

Inspect your code in the browser you will find a div with the class of dropdown-backdrop. This is created automatically by the browser. Try to Hide it by the following method, your code will start working.

In the CSS file:

.dropdown-backdrop {
    display: none;
}

Upvotes: 1

Ayush Chauhan
Ayush Chauhan

Reputation: 11

Oh yeah I faced the same problem , my navlinks were working fine in desktop but not opening for mobile devices.

All i did was , assigned a very big z-index number to my navlinks

#mainnav {
   position: absolute;
   font-family: 'Roboto Condensed', sans-serif;
   z-index: 10000;
}

Upvotes: 1

red
red

Reputation: 1619

Just add this:

.tp-simpleresponsive a{
    border:1px solid;
    display:block;
}

The problem is that your inline link in mobile not scale height with the image.

Upvotes: 1

Related Questions