Hitomilog

Blog of a web developer from Japan

CSS Responsive Utilities

2018-03-16 | Tips | CSS

This is what I always include in my css files for visibility control depending on device size.

@media (max-width: 567px) {
  .hidden-sm,
  .visible-md:not(.visible-sm),
  .visible-lg:not(.visible-sm),
  .visible-xl:not(.visible-sm) {
    display: none !important;
  }
}

@media (min-width: 568px) and (max-width: 767px) {
  .hidden-md,
  .visible-sm:not(.visible-md),
  .visible-lg:not(.visible-md),
  .visible-xl:not(.visible-md) {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hidden-lg,
  .visible-sm:not(.visible-lg),
  .visible-md:not(.visible-lg),
  .visible-xl:not(.visible-lg) {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hidden-xl,
  .visible-sm:not(.visible-xl),
  .visible-md:not(.visible-xl),
  .visible-lg:not(.visible-xl) {
    display: none !important;
  }
}

Below is how this works.

Class ≤ 567px 568 - 767 px 768 - 1023 px ≥ 1024px
hidden-sm Hidden Shown Shown Show
hidden-md Shown Hidden Shown Shown
hidden-lg Shown Shown Hidden Shown
hidden-xl Shown Shown Shown Hidden
visible-sm Shown Hidden Hidden Hidden
visibe-md Hidden Shown Hidden Hidden
visible-lg Hidden Hidden Shown Hidden
visible-xl Hidden Hidden Hidden Shown