Important

We are updating the images for OroCommerce version 6.1 to align with the latest changes in the back-office design. During this transition, some images may still show older versions. Thank you for your patience as we work to update all visuals to reflect these changes.

How to Change Media Breakpoints in Storefront

To update media breakpoints, change the next breakpoints:

$breakpoint-desktop: 1366px;
$breakpoint-desktop-small: 1280px;
$breakpoint-tablet: $breakpoint-desktop-small - 1px;
$breakpoint-tablet-small: 992px !default;
$breakpoint-mobile-big: 767px !default;
$breakpoint-mobile-landscape: 640px;
$breakpoint-mobile: 414px;

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: 1440px)',                            // 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.