Почему не работают медиа запросы на второй странице?

Question

[Andrey Vasilev]

Всем привет.

Имеются 2 страницы, на которых расположена одинаковая шапка.
Стиль шапки задаёт один css фаил.

Прописываю данный медиа запрос:
@media screen and (max-width: 1140px)
Он применяется ко всем двум страницам и шапка чувствует себя замечательно.

Далее, прописываю уже другой медиа запрос:

@media screen and (min-width: 320px) and (max-width: 768px)

И тут получаю нужные стили только на первой странице, на второй применяются стили для (768~1140), хотя выкрутил страницу до 320px

Может я уже поплыл, но завис уже на целый час и не понимаю, что не так.

Comments

[Rustam Bainazarov]

Типичный случай из серии: «Имеется что-то. Имеется где-то. Есть проблема».

Первое — проверьте, есть ли нужные CSS-правила на второй странице. Второе — проверьте, не перебивает ли их что-то по иерархии. Напомню, что стили адаптивности должны идти после основных.

~ ~ ~ ~ ~

Кстати, screen не нужно указывать в типичном случае, как и экран 320px, ибо меньше не бывает. Как раз из-за указания min-width: 320px может быть проблема, когда человек сжимает окно на ПК (там можно сделать ~200px), а для них не будут срабатывать стили.

[Andrey Vasilev]

Рустам Байназаров,
CSS правила полностью совпадают.
У меня файлик Sass к которому импортированы все стили header, прямо после импорта пишу медиа запросы.
Код смогу только днем скинуть, к сожалению.

[Rustam Bainazarov]

Andrey Vasilev, ссылка на проект?

[Andrey Vasilev]

Рустам Байназаров, репозитории не обновлял, фаилы только на локалке :/

[Andrey Vasilev]

Рустам Байназаров, https://codepen.io/Nolis/pen/dybNWxw
если это не о чём не скажет, то днём обновлю реп и скину ссылку
спасибо
п. с. на удивление в песочнице все работает.
вопрос пока не буду закрывать, завтра ещё раз перепроверю код,
всё-такие нужно время от времени спать)

[Rustam Bainazarov]

Andrey Vasilev, лучше обновите репозиторий, чтобы увидеть то, что не работает.

[Максим]

Andrey Vasilev, https://codepen.io/topicstarter/pen/yLBgXgz вот смотри - банальные стили работают значит медиа запрос работает, возможно вы что то накосячили

[Andrey Vasilev]

Рустам Байназаров, добавил sass файлы, чтобы было проще разобраться.
все медиа запросы пока лежат в style.sass. остальное рассортировано.
пока что без проблем адаптировал всё под таблеты.
а мобильные медиа стили применяются только к первой странице :/

[Rustam Bainazarov]

Andrey Vasilev, понял, смогу посмотреть вечером, пока не у ПК.

[Andrey Vasilev]

Рустам Байназаров, хорошо, буду ждать. пасиба)

[Rustam Bainazarov]

Andrey Vasilev, только ты не прислал селектор элемента, который надо отладить.

[Andrey Vasilev]

Рустам Байназаров, в index.html и balloons.html одинаковый < header >, style.sass подключен на обоих страницах, а медиа запросы работаю только в index.html, хотя ссылаются на один и тот же header-menu, например.
То есть ballons.html не воспринимает никакие медиа, кроме
@media screen and (max-width: 1140px)

[Rustam Bainazarov]

Andrey Vasilev, я пока не смог понять, где проблема, т. к. у меня <header> сжимается одинаково на обеих страницах.

[Andrey Vasilev]

Рустам Байназаров,
при < 1140 - да, меняется шрифт и в index и balloons.
при 320 ~ 768 - появляется мобильная икнока и убирается меню в index, но не в balloons.
но блин, стили-то с одного фаила они берут. а шапку из index я переносил ctrl+c - ctrl+v.

[Rustam Bainazarov]

Andrey Vasilev, вот-с мобильное меню при 768px:

[Andrey Vasilev]

Рустам Байназаров,

тык

ну вот так

[Andrey Vasilev]

Рустам Байназаров,

:/

[Rustam Bainazarov]

Andrey Vasilev, а ты мета-тег адаптивности на второй странице не забыл в шапке?

[Andrey Vasilev]

Рустам Байназаров, реально мета-тега нет. ну, видимо реально поплыл.
спасибо большое, кинь в ответку, я вопрос помечу ответом)

Answer 1

[Rustam Bainazarov]

На второй странице отсутствует мета-тег адаптивности:

<meta name="viewport" content="width=device-width, initial-scale=1">