Breakpoints

The breakpoint properties are the basis for defining the primary dimensions of the elements and the behavior of the layout on the different devices.

By default, Rosetta provides six measurements that are based on current standards, but these measurements can be modified by modifying the properties listed below.

Customizable properties

:root {
  --breakpoint-min    : 320px;
  --breakpoint-mobile : 576px;
  --breakpoint-tablet : 768px;
  --breakpoint-laptop : 992px;
  --breakpoint-desktop: 1200px;
  --breakpoint-large  : 1400px;
}