CSS Classes for Hiding on Desktop and Mobile

Here are some CSS classes for hiding a component on desktop and/or mobile. This seems a little dirty since you may ideally want components that are responsive. However, with some designs, you don’t have choice.


// LG =>1200px
@media (min-width:1200px){
   .hide-on-desktop {
      display: none;
   }
}

// MD 992-1199px
@media (min-width:992px) and (max-width:1199px) {
   .hide-on-desktop {
      display: none;
   }
}

// SM 769-991px
@media (min-width:769px) and (max-width:991px) {
   .hide-on-mobile {
      display: none;
   }
}

// XS-Tablet 321-768px
@media (min-width:321px) and (max-width:768px) {
   .hide-on-mobile {
      display: none;
   }
}

// XS-Phone =<320px
@media (max-width:320px) {
   .hide-on-mobile {
      display: none;
   }
}
Advertisements