I want to change the breakpoint of some some styles inside a native M2 module (specifically Magento_Catalog/web/css/source/_module.less).

Here is a link to the bp in question.

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

I need to change this from @screen__m to a custom breakpoint (800px).

Now, you can't just change that and pass in a new value willy nilly.

According to the devdocs, you have to create a new mixin rule for a custom mixin.

As best I can see, this mixin .media-width acts as a giant switch statement. And if you haven't defined a case for a breakpoint value that is passed, it simply ignores that call.

  1. So I create a new variable in my variable.less for my new value:

@bp-xm: 800px;

  1. I add a new mixin rule into _responsive.less (I have already ported this file into my theme already). I add it to the "mobile" section, as I want this to apply on all device types, and styles-m.css is always loaded.

& when (@media-target = 'mobile'), (@media-target = 'all') { ... @media all and (max-width: @bp-xm) { .media-width('max', @bp-xm); }
@media all and (min-width: (@bp-xm + 1)) { .media-width('min', (@bp-xm + 1)); } }

  1. I call my new rule by changing the line in the _module.less to this:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @bp-xm) {

According to the devdocs, this is all that needs doing to create a new value that is passable into the .media-width. But when I run this, the section of code I wrap this .media-width code in doesn't output at all. In the final, rendered, CSS file, this chunk of code simply doesn't exist.

I must have missed something.

How do you properly create a new breakpoint for use inside the .media-width mixin?


Figured it out.

So, I was correct in assuming that the .media-width mixin behaves like a switch statement.

The mixin appears to do a truthy check for the parameters that are passed (@extremum and @break), and checks to see if you have a rule that matches those values.


.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @bp-xm) {

It looks at the above statement and sees if it has a case to handle where @extremum = 'min' and @break = @bp-xm.

My issue ended up being that I had successfully created 2 new mixin rules, but there were to handle the following cases:

@extremum = 'max'; @break = @bp-xm;
@extremum = 'min'; @break = (@bp-xm + 1);

But I never called it with those paramaters. I called it with these:

@extremum = 'min'; @break = @bp-xm; // I never made a rule to handle this case

To fix my issue, I simply needed to change my call from being (@break = @bp-xm) to (@break = (@bp-xm + 1))

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = (@bp-xm + 1)) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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