How can i create custom breakpoint with min and max like @media only screen and (min-width:768px) and (max-width: 1023px) {...} in my custom theme in magento 2.1 ?

1 Answer 1


Create a custom variable in your custom_theme/web/css/source/_variable.less e.g

@custom__breakpoint: 1200px;

Copy _responsive.less file from lib/web/css/source/lib/_responsive.less to custom_theme//web/css/source/lib/ use .media-width() mixin to add the new breakpoint e.g.

& when (@media-target = 'desktop'), (@media-target = 'all') {
@media all and (min-width: @custom__breakpoint) {
    .media-width('min', @custom__breakpoint);

You can now call .media-width() mixin in your less file e.g.

@media screen and(min-width: @custom__breakpoint) {

Further read https://goo.gl/FS2271

.media-width() doesn't let you add both min and max widths, to achieve that you either have to write a new mixin or alternatively (which makes more sense) create two breakpoints (min and max as per your required values) and use them in the call e.g.

@media all and (max-width: @custom__max-width) and (min-width: @custom__min-width) { ... }

  • Thanks for answer @Devtype, But i want to use min and max width together which i mentioned. Commented Nov 23, 2016 at 13:27

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.