Change the responsive breakpoint on Magento 2
In Magento’s Blank and Luma themes, the breakpoint which switches between
mobile and desktop views is 768px
.
Why?
Magento uses it in a number of places.
- In the
media
attribute for the link element used to add styles-l.css, which is set in default_head_blocks.xml. - With the @screen__m LESS variable used in a .media-width() mixin.
-
In menu.js to change the navigation menu’s look and behaviour depending on the breakpoint.
-
In responsive.js to implement specific responsive functions for the Blank and Luma themes.
For more informations see the CSS in responsive design & JavaScript in Magento responsive design Magento docs.
How to change
Below is an example of extending/overriding each of these in a child theme.
To change the responsive breakpoint from Magento’s default 768px
to 992px
.
1. The media attribute for the styles-l.css stylesheet
In the default_head_blocks.xml file of your theme change the breakpoint
used for loading the styles-l.css stylesheet to 992px
.
app/design/frontend/[Theme namespace]/[theme name]/Magento_Theme/layout/default_head_blocks.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/styles-l.css" media="screen and (min-width: 992px)"/>
</head>
</page>
2. The @screen__m LESS Breakpoint
You can change the value for @screen__m
in your theme’s _variables.less.
Copy this file from your parent theme to your theme, if you haven’t done so already, and add:
app/design/frontend/[Theme namespace]/[theme name]/web/css/source/_variables.less
// Overriding values for core breakpoints
@screen__s: 768px; // 640px by default
@screen__m: 992px; // 768px by default
As lazy evaluation is used for LESS variables, it’s as straight forward as this to change the value of the breakpoint here. But it must be done in the _variables.less file of your theme, adding to it _extend.less won’t work due to how Magento implements it’s .media-width() mixins.
3. Breakpoint in menu.js
Extending this file is possible with a JavaScript mixin.
In your theme create a requirejs-config.js file.
app/design/frontend/[Theme namespace]/[theme name]/requirejs-config.js
var config = {
config: {
mixins: {
'mage/menu': {
'Magento_Theme/js/menu-media-breakpoint-mixin': true
}
}
}
};
Next add the JavaScript mixin file to change the breakpoint to 992px
.
app/design/frontend/[Theme namespace]/[theme name]/Magento_Theme/web/js/menu-media-breakpoint-mixin.js
define([], function () {
'use strict';
return function (widget) {
widget.menu.prototype.options.mediaBreakpoint = '(max-width: 992px)';
return widget;
};
});
4. Breakpoint in responsive.js
Unfortunately for responsive.js, the file needs to be overridden rather than extended in the theme.
A JavaScript mixin won’t work as it is initialised in the deps block of the
blank parent theme’s requirejs-config file rather than within the define
parameters of a requirejs module, a data-mage-init
attribute
or the <script type="text/x-magento-init" />
tag.
So copy vendor/magento/theme-frontend-blank/Magento_Theme/web/js/responsive.js
(some times found in the vendor/ directory depending on how you installed Magento)
to your theme’s
app/design/frontend/[Theme namespace]/[theme name]/Magento_Theme/web/js/
directory.
And in this file change:
media: '(min-width: 768px)'
to
media: '(min-width: 992px)'
Conclusion
That’s all you need to do to change the responsive breakpoint in your theme.
This can be useful for modern ecommerce web designs and larger mobile devices which have become more common.