Add a custom breakpoint in Magento2

This topic describes how to add a custom breakpoint in your theme.

Overview

  • Define a variable for the new breakpoint.
  • Override the library _responsive.less file, and add the new rule
  • Implement the screen changes for the new breakpoint.

Add a new breakpoint variable

In your custom theme directory, add a variables.less file in the following path
/app/design/frontend/Vendorname/themename/web/css/source/variables.less

In variable.less, add the variable for your new breakpoint.

Override _responsive.less from the library

Copy the _responsive.less file to your your_theme_dir/web/css/source/lib/ directory
path: /app/design/frontend/Vendorname/themename/web/css/source/lib/_responsive.less

So your custom _responsive.less looks like

In your _responsive.less, add the .media-width mixin rule for your breakpoint in the corresponding section (desktop or mobile, depending on the type of breakpoint you add). In this file we have used our custom breakpoint in both mobile and desktop.

Add .media-width() calls for the new breakpoint

Now you can add a new .media-width() mixin call where necessary in your theme .less files.

Add the following code in /app/design/frontend/Vendorname/themename/web/css/source/_theme.less

Note : Import your variables.less file in _theme.less

Clear all the Magento cache

  • Go to Magento root directory
  • Type: php bin/magento cache:clean and php bin/magento cache:flush

You can also clean and flush cache types in the Magento Admin. Go to System > Tools > Cache Management. Flush Cache Storage is equivalent to magento cache:flush. Flush Magento Cache is equivalent to magento cache:clean.

Give the permission and then deploy the static content by

Share this article

Leave a comment