CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Lewis Clarke
Lewis Clarke

Reputation: 69

Display content only on mobile devices

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>

Upvotes: 0

Views: 9153

Answers (4)

Aryan Twanju
Aryan Twanju

Reputation: 2516

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

Upvotes: 0

vishnu
vishnu

Reputation: 2948

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>

Upvotes: 0

Demo Demo
Demo Demo

Reputation: 82

.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>

Upvotes: 0

Darshan Dave
Darshan Dave

Reputation: 645

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>

Upvotes: 3

Related Questions