Почему не работает медиа запрос?

Question

[IvanRobot]

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

Селектор верный, но страница не изменяется при уменьшении разрешения экрана. в чём ошибка?

UPD:

Исправил, работает.. но почему-то только при 640px (Opera не правильно значение отображает)

@media screen and (max-width: 720px) {
    a.b-main-menu__item {
      line-height: 100px;
    }
}

Answer 1

[Laid]

Еще повысьте иерархию селлектора.
То есть перед .b-main-menu__item добавьте название тега. Т.е. если это div, то:
div.b-main-menu__item
А ещё лучше добавить блок верхнего уровня
то есть .b-main-menu__item находится в блоке .block, то:
.block div.b-main-menu__item

Comments

[IvanRobot]

нигде такого не видел, но помогло :)

Answer 2

[Николай Шабалин]

max-device-width
Размер экрана, а не "разрешения экрана".
Попробуйте, max-width.

Answer 3

[Сергей Зеленский]

Вообще вроде так делается

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