How to disable href when media request detects a certain browser size

Question

I have a sensitive grid with 20 images, which when touched or clicked open a larger, full-sized corresponding image in a slide show.

But:

I need to disable this link for slideshows only on mobile devices (<= 480).

Here's how it works:

<div class="box"> <div class="boxInner"> <a href="slideshow_illustration.html?er_col=0"/><img src="_assets/grid_illustration/geisha.jpg"> <div class="titleBox">Geisha</div> </div> </div> 

Please know: I’m just a photographer / artist trying to create a responsive personal website, so you have to talk to me as if I’m 10 years old.

Thanks in advance for any time and patience.

Answer 1

Depending on what you are trying to execute, one way to do this without javascript is to use pointer-events . This basically disables clicking on the item.

 @media only screen and (max-device-width: 480px) { .boxInner a { pointer-events: none; } } 

Answer 2

Include jquery on your site by including it on your page

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 

Then write a small script as follows:

 <script type="text/javascript"> $(document).ready( function() { if (screen.width <= 480) { $('.boxInner a').on('click', function (event) { event.preventDefault(); }); } }); </script> 

This should check if the screen is <= 480, and disable links, if any.