Why doesn't media query?

@media all and (max-device-width: 720px) {
 .b-main-menu__item {
 line-height: 100px;
 background: green;
}
}


The selector is correct, but the page is not resized when reducing the screen resolution. what is the error?

UPD:

Fixed, it works.. but for some reason only at 640px (Opera does not properly value displays)

@media screen and (max-width: 720px) {
 a.b-main-menu__item {
 line-height: 100px;
}
}
July 8th 19 at 15:53
3 answers
July 8th 19 at 15:55
Solution
Even promote a hierarchy of selector.
That is, before .b-main-menu__item add a name tag. Ie if the div, then:
div.b-main-menu__item
And even better to add a top-level
that is .b-main-menu__item is in the block .block, then:
.block div.b-main-menu__item
not seen this anywhere else, but it helped :) - theo8 commented on July 8th 19 at 15:58
July 8th 19 at 15:57
max-device-width
The size of the screen instead of "screen resolution".
Try max-width.
July 8th 19 at 15:59
It seems that this is done
@media screen and (max-width: 720px) {
 .b-main-menu__item {
 line-height: 100px;
 background: green;
}
}

Find more questions by tags CSS