Breakpoints

Vanilla uses three main breakpoints for screen sizes, below you can see the setting, default width and device examples at which the content will scale.

Target small screens

@media screen and (width < $breakpoint-small) {
  // css
}

Target medium size screens

@media screen and ($breakpoint-small <= width < $breakpoint-large) {
  // css
}

Target large screens

@media screen and ($breakpoint-large <= width) {
  //css
}

Target extra large screens

@media screen and ($breakpoint-x-large <= width) {
  //css
}

Modifying the navigation breakpoint threshold

The $breakpoint-navigation-threshold is the breakpoint in which the navigation switches from horizontal (desktop devices) navigation to a burger style menu (mobile devices).

If you have a large number of menu items, you may consider overriding this value to a larger value so the navigation snaps to a burger menu at a larger breakpoint.

Modifying the heading breakpoint threshold

$breakpoint-heading-threshold is the breakpoint in which the heading sizes switch from a 1:2 modular scale ratio (desktop devices) to a 2:3 ratio (mobile devices).