Media Breakpoints

Define common responsive rules to support mobile first design standards and integrating a standard grid system structure.

Basic usage

(XL) – Desktop

@media (min-width: 1200px) { rules here }

(LG) – Small Desktop or Large / Horizontal Orientation Tablet

@media (min-width: 992px) { rules here }

(MD) – Vertical Orientation Tablet or Horizontal Orientation / Large Mobile

@media (min-width: 768px) { rules here }

(SM) – Vertical Orientation Mobile or Horizontal Orientation Small Mobile

@media (min-width: 576px) { rules here }

(XS) – Vertical Orientation Small Mobile

@media (max-width: 575px) { rules here }