How to Change Media Breakpoints in Storefront

To update media breakpoints, change the next breakpoints:

// Desktop Media Breakpoint;

$breakpoint-desktop: 1100px;
$breakpoint-tablet: $breakpoint-desktop - 1px;
$breakpoint-tablet-small: 992px;
$breakpoint-mobile-landscape: 640px;
$breakpoint-mobile: 414px;
$breakpoint-mobile-big: 767px;

To add, update media queries theme, a developer must create files with the your-theme/settings/global-settings.scss global-settings and update the list with custom breakpoints.

$custom-breakpoints: (
    'big-tablet': '(min-width: 1100px) and (max-width: 1299px)', //  add a new rule
    'desktop': '(min-width: 1300px)',                           // update an existing rule

$breakpoints: merge-breakpoints($breakpoints, $custom-breakpoints);

To disable a media query theme, a developer must set breakpoint to null

$custom-breakpoints: (
    'desktop': null                        // disable an existing rule

$breakpoints: merge-breakpoints($breakpoints, $custom-breakpoints);


You have to put this code into your own settings/global-settings.scss file as described in the CSS Files Structure article.