Почему правило @media screen and (max-width: 768px) может не работать?

Question

[Tomayo]

Добрый день!)
Почему правило media screen and (max-width: 768px) может не срабатывать при уменьшении экрана? На сайте подстраивается все, кроме одного элемента, как это можно исправить?

Answer 1

[Rsa97]

Потому что общее правило для .content идёт после секции media и, соответственно, перекрывает правила, указанные в секции.

Comments

[Tomayo]

Не поняла вас, что нужно исправить в этом случае?

[Rsa97]

Tomayo, Сначала указать общее правило .content, а ниже него секцию @medium со своим правилом для .content.
У вас правила имеют одинаковую специфичность, значит применяется последнее встреченное значение.

[Tomayo]

Спасибо, еще вопрос.. Что тогда не так с title? и button

[Сергей delphinpro]

Tomayo, ровно тоже самое =)
Вы же не будете переспрашивать про все правила? =)))

[Вадим]

Tomayo, Вы прикладываете скриншоты из инструментов разработчика, где отображён порядок применения правил. Чем выше правило в инструментах разработчика, тем позже оно применяется относительно всех стилей. Соответственно, тем ниже оно в вашем коде. Понимаете к чему я?
Проблема таже самая.

[Tomayo]

Сергей delphinpro, Просто сначала не поняла как это работает )

[Tomayo]

Вадим, Да, спасибо! Не знала, что это так работает )