Breakpoints
Responsive breakpoints
Use these breakpoints to make your website responsive.
| Name | Media queries |
|---|---|
| xs | screen and (max-width: 599px) |
| sm | screen and (min-width: 600px) and (max-width: 959px) |
| md | screen and (min-width: 960px) and (max-width: 1279px) |
| lg | screen and (min-width: 1280px) and (max-width: 1919px) |
| xl | screen and (min-width: 1920px) |
The next breakpoints are using "down" and "up" suffixies.
All the breakpoints above the up ones are gonna be applied to all uppers breakpoints.
All the breakpoints under the down ones are gonna be applied to all lowers breakpoints.
| Name | Media queries |
|---|---|
| sm-down | screen and (max-width: 959px) |
| md-down | screen and (max-width: 1279px) |
| lg-down | screen and (max-width: 1919px) |
| sm-up | screen and (min-width: 600px) |
| md-up | screen and (min-width: 960px) |
| lg-up | screen and (min-width: 1280px) |
