Breakpoints

The boilerplate comes with a standardized set of breakpoints, with the following specs:

NameBreakpointDescription
xxs≥0Normal mobile devices
xs≥480Large mobile devices or tiny tablets
sm≥768Small tablets
md≥1024Large tablets or tiny desktops
lg≥1280Small desktops
xl≥1440Normal desktops
xxl≥1920Large desktops

Targeting breakpoints

Inside www/shared/styles/imports/custom-medias.css, you will find Custom Media Queries to target resolutions higher, higher or equal, lower and lower or equal for each breakpoint.

Here's an example:

@import "../../shared/styles/imports";
.myPage {
padding: 0 25px;
@media (--lt-sm) {
padding: 0 10px;
}
}