Breakpoints

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

Target extra small screens

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

Target small screens

@media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-medium) {
  // css
}

Target medium screens

@media screen and (min-width: $breakpoint-medium) and (max-width: $breakpoint-large) {
  // css
}

Target large screens

@media screen and (min-width: $breakpoint-large) {
  //css
}

Target extra large screens

@media screen and (min-width: $breakpoint-x-large) {
  //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 large breakpoint 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).