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

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;}
}

Answer 2

.mobileShow {display: none;} 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
   .mobileShow {display: block;}
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
   .mobileShow {display: block;}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
   .mobileShow {display: block;}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
   .mobileShow {display: block;}
}
/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
   .mobileShow {display: block;}
}
<div class="mobileShow">
  <a> Apply now</a>
</div>

Answer 3

You can simply use @media query to manage under tablets and mobile. Media width should be as per your requirement.

.mobileShow {display: none;} 

  /* Smartphone Portrait and Landscape */ 
  @media (max-width: 768px) { 
      .mobileShow {display: inline;}
  }

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

Answer 4

Please check, and adjust you screen you will get result and change width as per your requirement

.mobileShow {display: none;} 

  /* Smartphone Portrait and Landscape */ 


  @media only screen and (max-width: 600px) {
    .mobileShow {display: inline;}
}

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