Blog

Overview

Magento 2 UI library utilizes a handful of predefined variables for breakpoints. While this is extremely helpful, there are times when additional breakpoints are needed. Specifically, when dealing with third-party extensions that implement breakpoints unique to their own needs.

If you find you need a media query other than the out-of-the-box breakpoints Magento provides, it’s best to follow the proper steps to create your own. It’s important to use the mixin that Magento 2 provides rather than adding a media query via CSS:

VS

Reason being, the mixin groups the styles and outputs them all in one place; whereas the CSS media query will be output wherever it is used, creating multiple calls for the same query.

Custom Breakpoints

Define a custom variable.

We will need to define a custom variable for our new breakpoint. We can do that by navigating to our theme’s /web/css/source/_variables.less file. If this file doesn’t exist, copy it from the parent theme. Then, define the custom breakpoint:

Implement new breakpoint in our theme.

Override the default _responsive.less file located in the Magento UI library by copying this file into our own theme in the proper location: /web/css/source/lib/.

Always remember to run grunt exec:[theme_name] after a new file is added so the file is recognized.

Now we are free to use our custom media query mixin throughout our theme.