Lib media query - No max-width for large devices

[BenSpace48]

Using the media query mixin from the UI library means I can not use a max-width media query for large devices, this is causing me to write double the amount of code. I have never had this problem before with other mobile-first media query mixins.

How to replicate

Let's say I want to make the background blue up until desktop (@screen__l). I would ideally be able write a few lines of code to set a max-width media query up to @screen__l. Like so:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
    body {
        background: blue !important;
    }
}

Outcome

The code is not rendered as the media query mixin is not set to handle max-width for large devices.

Expected Result

I would expect the media query to output my code up until the value set by @screen__l - 1px.

@media only screen and (max-width: 1023px) {
    body {
        background: blue !important;
    }
}

Workaround

But this does not work, so I am forced to write more code to get around this. This code sets the background to blue for every device, then overwrites the background declaration again when on desktop. Doubling the amount of code can not be best practice.

& when (@media-common = true) {
    body {
        background: blue !important;
    }
}


.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    body {
        background: white;
    }
}

Fix

The fix is to include the below media query (and one for XL) to the mobile and desktop mixin inside lib/web/css/source/lib/_responsive.less:

@media only screen and (max-width: (@screen__l - 1)) {
    .media-width('max', @screen__l);
}

I will create a pull request for this shortly.

[BenSpace48]

@MomotenkoNatalia If you choose to apply this then I have created a pull request - #4584

[pw818]

Thanks @BenSpace48 for sharing the solution.

[MomotenkoNatalia]

Hi @BenSpace48 !
We appreciate your work on this pull request, but after long discussion we made a decision to refuse its adoption, since these changes are not required for our themes, and all customization of media queries configuration required for particular theme can be easily added by overriding _responsive.less file.

[BenSpace48]

No problem, that's the route I have gone down. Thanks

[santanajames]

I am surprised that this was rejected. It's a breakpoint in your variables, why does it have a min setting and not a max. Moreover, this adds no side effects or extra code output to css files. The response that:

we made a decision to refuse its adoption, since these changes are not required for our themes

was dismissive and frankly, an insult to the large community who support this platform.

This three-line PR from @BenSpace48 would have saved myself and any other dev running into this valuable time, but, _it can be easily added by overriding responsive.less

@BenSpace48 thanks for the fix.