Display content only on mobile devices

Question

been working with media queries recently and for some reason unknown to me this doesn't work?

The idea is to only display the content on mobile devices. IE phones and tablets. Any and all advice would be welcome. Hopefully I'm not being a total idiot and missing something obvious.

here is the code:

 .mobileShow {display: none;} 

  /* Smartphone Portrait and Landscape */ 
  @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px){ 
      .mobileShow {display: inline;}
  }

<div class="mobileShow">
  <a> Apply now</a>
</div>

Answer 1

Basically the viewport dimension for mobile phones and tablets fall under media query of (max-width: 991px), so you can update your code this way.

@media (max-width: 991px) { 
   .mobileShow {display: block;}
}

However, some tablets have dimensions of 1024px width, so if you want to include them as well, you can use this code.

@media (max-width: 1024px) { 
   .mobileShow {display: block;}
}