Magento 2 CSS Media Queries not working on

Question

I am facing the problem that my media queries in my custom theme derived from luma do not work as expected, when I am deploying the static files via the command line. The result is, that the styles defined without media queries and the styles defined in the media query bracelets end up in the styles-l.css file.

I cannot assure you, that I did everything right, so here is what I did exactly:

I have created a new theme, with the luma theme as parent. I added some overall css changes, including some media queries in

<vendor>/<theme>/web/css/source/_theme.less

excerpt from _theme.less

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .navigation {
        max-width: initial;
        text-align: center;
        a {
            display: inline-block;
        }
        .level0 {
            display: inline-block;
        }
        .submenu {
            text-align: left;
        }
    }
}
//Add hover effect on menu items to mobile styles
.navigation {
    a {
        &:hover {
            .lib-css(background, @navigation-hover_background_color);
        }
    }
}

These media queries do work as expected!

But further I including this one in the _theme.less:

@import "_overview.less";

_overview.less:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
.subcategories-grid {
    .subcategory-item {
        width: 24%;
        height: 300px;
        line-height: 300px;
        img {
            line-height: 300px;
            width: 200px;
            height: 200px;
        }
    }
  }
}

.subcategories-grid {
    list-style: none none;
    .subcategory-item {
        width: 49%;
        height: 200px;
        line-height: 200px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        padding: 1px;
        img {
            vertical-align: middle;
            line-height: 200px;
            width: 120px;
            height: 120px;
        }
    }
    .subcategory-item:hover {
        box-shadow: 3px 3px 4px 0 rgba(0,0,0,0.3);
        border: 1px solid #bbb;
        padding: 0px;
    }
}

So, if I understand correctly the first part should reside only in the styles-l.css and the second part should reside only in the styles-m.css. This is not the case. Both definitions are written to the styles-l.css resulting in the second part being used on large devices. The order does not matter btw. If I swap the desktop media query with the mobile definitions, still the mobile definitions are used on desktop sizes.

Maybe I did something wrong here and I cannot apply these media queries the way I did. Maybe I can only use this media query once? Maybe additional imported files are ignored somehow?

Sorry for the long question, but you may get a better idea of my current file/code structure this way. In the case there is something wrong.

Thanks in advance.

Answer 1

You are correct that when you place any styles in:

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

They will only be included in the styles-l.css file and not in the styles-m.css. But all styles will be compiled to the styles-l.css file and only styles not wrapped in that line of code will show up in the mobile styles sheet. The idea being that if you have styles that don't exist on a mobile device, there is no reason to have the extra code weight in that file.

To make things easy for my work flow, i have three media queries in every .less file:

//
//    Common
//--------------------------------------
& when (@media-common = true) {}

This is for styles that are used in both mobile and desktop views

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

This is for styles that will only be included in the styles-l.css file.

//
//  Mobile
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {}

And this is for all mobile styles.

All my code is wrapped in one of these three, and this way i have a clear separation between that different breakpoints and sheet.