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.

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.

  • 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 '16 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 '16 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 '16 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 '16 at 15:32
  • In version 2.1.7, the breakpoints above work perfectly if added to vendor/magento/theme-frontend-luma/web/css/source/_extends.less but the mobile style doesn't work if breakpoints are added to a custom theme that inherits from luma. – Aydus-Matthew Jul 1 '17 at 0:06

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.