Не переопределяются селекторы в медиа выражениях?

Question

[buzzloud]

Друзья, помогите разобраться с вопросом.
Для одно блока есть два разных селектора. Первый должен срабатывать на планшетной ширине, а второй на десктопной. Конструкция такого плана:

<div class="week-product__descr--tablet week-product__descr--desk">content</div>
.week-product__descr--tablet - селектор для планшета
.week-product__descr--desk - селектор для десктопа

Проблема в том, что на десктопной версии НЕ срабатывает селектор для десктопа... div отображается с теми свойствами, которые заданы для планшета. На скрине открыт экран для десктопа, но активен селектор для планшета.



Сразу скажу, что уже пробовал утяжелять каждый из этих селекторов, итог - нулевой. Работает только для какого-то одного экрана. И да, css-код пишется в препроцессоре и сначала идут селекторы для планшета, потом для десктопа (хотя судя по скрину это наоборот). Что не так с медиа или селекторами?

Answer 1

[Алексей Уколов]

А зачем вы вообще разные классы делаете? Планшет или десктоп определяются медиа-выриажениями, класс при этом менять совершенно ни к чему. Уберите костыли с классами и наверняка сразу всё заработает. Ну или сможете найти причину проблемы.

Comments

[buzzloud]

С этого всё и начиналось) Так тоже не работает

[Алексей Уколов]

Сделайте пример на codepen или jsfiddle, по ксерокопии кода вам никто не поможет.

[buzzloud]

Тут похоже дело в том, что в десктопной версии не срабатывает медиавыражение для этого блока. Причем для других блоков, которые также находятся в этом родительском блоке (и для самого родителя) медиа срабатывает. Вопрос почему может не работать медиа именно для этого блока?

Пример - там достаточно много других блоков, долго будет писать. Тем более для них всё работает, а тут хоть головой об стену)

[Алексей Уколов]

В таком случае могу сказать только, что у вас где-то ошибка. Более подробно долго будет писать - там достаточно много разных вариантов. Тем более, что у других всё работает.

Answer 2

[Ivan Korsakov]

У класса для планшета указан media-query, а для десктопа не указан (он будет применяться в разрешении меньше 768px). Также необходимо изменить логику медиа выражений: https://css-tricks.com/logic-in-media-queries/

Comments

[buzzloud]

Тоже обратил внимание на то, что media-query, а для десктопа не указан (в инспекторе). Но, в коде то media-query для десктопа есть!

[Ivan Korsakov]

buzzloud: https://jsfiddle.net/russiansoon/mceqn38c/

[buzzloud]

Я согласен, так и должно быть. Но дело в том, что в десктопной версии не срабатывает медиавыражение для этого блока. Причем для других блоков, которые также находятся в этом родительском блоке (и для самого родителя) медиа срабатывает. Почему...?

[Ivan Korsakov]

buzzloud: нужен пример. Скорее всего опечатка в названии класса

[Андрей]

buzzloud: Так? codepen.io/AndrewHaze/pen/zBwAoA

Answer 3

[buzzloud]

В общем разобрались. В итоге в большом участке кода была потерялась одна закрывающая скобка. Поставили на место и все заработало. Реально измучало это, пока нашлась причина. Вот это и называется опытом)

Comments

[Алексей Уколов]

Опыт в данном вопросе легко заменить любой приличной IDE.