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.