Google chrome не обрабатывает медиа-запрос

Вчера всё началось с такой проблемы. Написал код в самый конец CSS-файла:

@media screen and (max-width: 1000px) {
    ....
}

Но google chrome не воспринимал этот запрос. Как будто его просто нет. Я и хром перезапускал и live server перезапускал и комп перезагрузил - не работает. А в firefox работало. Но в firefox dev tools какой-то вообще корявый и неюзабельный. Потом, внезапно, в хроме заработало. Я ничего не делал. Оно просто взяло и заработало.
Сегодня дописал:

/*
@media screen and (max-width: 1000px) {
    ....
}
*/

@media screen and (max-width: 560px) {
    .card {
        width: 550px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .photo {
        display: none;
    }
}

Не работает! Раскомментирую верхний - он работает. А нихний нет! А в firefox работают оба.
Что за?

Сейчас попробовал сужать само окно браузера, а не dev tools. Работает! Почему тогда в dev tools не работает? Какая там уже версия браузера? 156-ая? А dev tools всё никак допилить не могут :man_facepalming:

Это как? Девтулз не в окне браузера был?

Отключил device mode в dev tools и сужаю сам браузер. Это нифига не удобно, потому что не видно ширину вьюпорта. Зато работает :man_shrugging:

Когда я узнал, что dev tools можно откреплять - теперь всегда открепляю. Когда всё в одном окне - не удобно ведь.

Так а причем тут окна девтулза? Оно не влияет же на размер браузера.

А ресайз самого окна хрома у меня работает нормально со всеми вариантами девтулза и device mode. Размер показывается сверху или справа, @media применяется.

Я про вот это вот


Когда за эту фигню дергаешь, медиа запрос не обрабатывается.
Или если наверху вручную ширину прописать - тоже не обрабатывается. Как будто его нет.

Подсказали, что вместо max-width надо юзать max-device-width. Тогда в device mode работает. Но возникает другая проблема. Страница в разных браузерах выглядит по-разному и хз, как это решать.