I need to add custom breakpoint.
for example

  1. max-width: 479
  2. max-width: 767
  3. max-width: 1023

Thanks in advanced.

2 Answers 2


According to Magento dev docs you should create and add your breakpoint variable to app/design/frontend/[package]/[theme]/web/css/source/variables.less

@screen__breakpoint_example: 1200px;

In my theme I have this as _variables.less. Underscore in the file name means that the file isn’t used separately, but is part of other files.

From here you add a new media query that contains your breakpoint. Create the following file in your theme app/design/frontend/[package]/[theme]/web/css/source/lib/_responsive.less This will override Magento's default media queries.

Make sure to copy over all contents from lib\web\css\source\lib\_responsive.less into your theme's _responsive.less if you want keep Magento's default media queries.

Keep in mind Magento 2 is mobile first when adding your media query.

//  Style groups for 'desktop' devices
//  ---------------------------------------------

& when (@media-target = 'desktop'), (@media-target = 'all') {

  @media all and (min-width: @screen__m),
  print {
    .media-width('min', @screen__m);

  @media all and (min-width: (@screen__m + 1)),
  print {
    .media-width('min', (@screen__m + 1));

  @media all and (min-width: @screen__l),
  print {
    .media-width('min', @screen__l);

  @media all and (min-width: @screen__breakpoint_example),
  print {
    .media-width('min', @screen__breakpoint_example);

  @media all and (min-width: @screen__xl),
  print {
    .media-width('min', @screen__xl);

The values of these other breakpoint variables can be referenced here lib/web/css/source/lib/variables/_responsive.less Now you can use your breakpoint anywhere in your theme.

.media-width(@extremum, @break) when (@extremum = 'min') and (@break =  @screen__breakpoint_example) {
    // add styles

For more detail see: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/responsive-web-design/rwd-breakpoints.html


In app/design/frontend/[package]/[theme]/web/css/source/_extend.less:

add your own:

@mobile:      ~"screen and (max-width: 472px)";
@tablet:      ~"screen and (min-width: 768px)";

And then use it:

.selector {
    @media @tablet {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.