Responsiveness

Breakpoints

Breakpoint	Minimum Width
xs	`0`
sm	`576px`
md	`768px`
lg	`992px`
xl	`1200px`
2xl	`1600px`
3xl	`1920px`

You can use these breakpoints in your CSS using media queries:

@media (min-width: 768px) {
  /* Styles for medium screens and above */
}

We have provided CSS custom properties for these breakpoints, but they cannot be used in media queries as they get evaluated before CSS custom properties are available.

:root {
  --tng-breakpoint-sm: 576px;
  --tng-breakpoint-md: 768px;
  --tng-breakpoint-lg: 992px;
  --tng-breakpoint-xl: 1200px;
  --tng-breakpoint-2xl: 1600px;
  --tng-breakpoint-3xl: 1920px;
}

Built-in Responsiveness

Some of our styleguide is responsive out-of-the-box.