Important

You are browsing the documentation for version 4.2 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Security Support ends in January 2024. Read version 5.0 (the latest LTS version) of the Oro documentation to get the updated information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

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);

Note

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