2

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.

1 Answer 1

5

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.

9
  • 1
    Actually I have found this workaround already and it works. But that has nothing to do with the Mobile First Approach. If applied correctly the mobile styles are the base styles and are overridden by the desktop styles in the media query. I'm not quite sure if I use the magento part wrong or magento(or the library they use) implemented it incorrectly. The important part is the override.
    – xeed
    Nov 9, 2016 at 17:59
  • If you have the time, post what you are doing as an answer. I'm sure there would be people searching around that might want to learn from your solution.
    – circlesix
    Nov 10, 2016 at 16:27
  • 1
    I could not find any better solution. That's why I marked yours as an answer, since it's working.
    – xeed
    Nov 12, 2016 at 13:08
  • ah, must have read that wrong, i though you had a different way to do it them my suggestion. There is always another way is Magento!!!
    – circlesix
    Nov 13, 2016 at 15:32
  • 1
    What I don't understand 100% is why the first example that you mentioned is even necessary. Why do I need to wrap my common styles in & when (@media-common = true) {}. Can I not just leave that wrapper and enter my styles directly?
    – Louis B.
    Nov 12, 2020 at 8:23

Your Answer

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

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