Не меняется media-запрос при изменении padding. Что делать?

Question

[Taron4uk]

Подскажите, пожалуйста, в чём может быть причина.
Padding в модальном окне изначально задан так:

.modal-popup__form 
  padding: 35px 88px 50px 88px

Когда делаю отдельный media-запрос, чтобы при размере 480 показывало

@media screen and (max-width: 480px)
  .modal-popup__form
   padding: 35px 40px 50px 40px
  .modal-popup__title
   font-size: 16px

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

Answer 1

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

Они зачёркиваются как раз, чтобы показать вам, что браузер их увидел, распознал, но приоритет выше у другого правила.

В вашем случае применимы оба селектора - и тот, что внутри медиа-выражения, и тот, что снаружи - поэтому применяется тот, что объявлен последним, т.е. с 1945 строки.

Решения два:
1. Переместить медиа-выражения в конец файла стилей.
2. Переписать код:

.modal-popup__form
 padding: 35px 40px 50px 40px

@media screen and (min-width: 481px)
.modal-popup__form 
  padding: 35px 88px 50px 88px

Второе, разумеется, надёжнее.

Comments

[Taron4uk]

Спасибо!