Disable Media File Image Link On Mobile Devices

Question

You can easily do this using HTML and CSS. You can write 2 blocks of div for the same image and toogle display:none; properties in CSS using media queries as shown below. Note: I have remove the “a href” tag for mobile.

<!--HTML Start -->
 <div class="image-grid desktop">
 <a href="#"><img  src="#" /></a>
 <div>

   <!--For Mobile -->

 <div class="image-grid mobile">
 <img  src="#" />
 <div>

<!--HTML End -->

<!--CSS Start -->
.image-grid.mobile{display:none;}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 1) {

.image-grid.desktop{display:none;}
.image-grid.mobile{display:block;}

}


<!--CSS End -->