user1123 user1123 - 1 year ago 74
CSS Question

How to display html content only on tablets and not on phone or desktop?

I have a div element in html which contains a video tutorial which I want to display only when viewed on tablets and not on mobiles or desktops. How do I achieve this?

Answer Source

You can use CSS media queries to solve this. The standard size for tablets is the range 768px to 992px. So, you can write two media queries: one for less than tablet-size(mobiles) and other for greater than tablet-size(desktops). And then set visibility to hidden and display to none. Any css you want to write for tablet size you can include it in your normal standard css.

@media screen and (max-width: 768px) {
  .divclass {
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}

@media screen and (min-width: 992px) {
  .divclass {
    visibility: hidden;
    display: none;
    /* your any other css styles */
  }
}