16 November, 2019

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.

  1. In the media attribute for the link element used to add styles-l.css, which is set in default_head_blocks.xml.
  2. With the @screen__m LESS variable used in a .media-width() mixin.

magento 2 breakpoints

  1. In menu.js to change the navigation menu’s look and behaviour depending on the breakpoint.

  2. 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.