user1123 user1123 - 5 months ago 25
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

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 */
  }
}