Breakpoints

A mobile-first approach is recommend across the project.

This means the default styles are defined for the smallest breakpoint (xsmall) by default, without media queries. If any specific styles must be applied at larger breakpoints, media queries should be used.

Breakpoints values

The values below are the pixel unit at which that breakpoint starts.

Usage

min-width

// CSS
// min-width media queries
@media (min-width:620px) { ... }
@media (min-width:720px) { ... }
@media (min-width:1020px) { ... }
@media (min-width:1140px) { ... }
@media (min-width:1260px) { ... }

max-width

// CSS
// max-width media queries
@media (max-width:1259.98px) { ... }
@media (max-width:1139.98px) { ... }
@media (max-width:1019.98px) { ... }
@media (max-width:719.98px) { ... }
@media (max-width:619.98px) { ... }

between min and max

// CSS
// between 2 breakpoints
@media (max-width: 1139.98px) and (min-width: 620px) {
  p {
    font-size: 2.5rem;
  }
}

only

// CSS
// only 1 breakpoint

// medium breakpoint only - between 720px (medium lower range) and 1139.98px (medium upper range)
@media (max-width: 1139.98px) and (min-width: 720px) {
  p {
    font-size: 1.5rem;
  }
}