@Taron4uk

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

Подскажите, пожалуйста, в чём может быть причина.
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 просто зачеркиваются. Хотя все медиа-запросы указаны правильно и проблем до этого не было
5cbdcbd1d8024721876816.jpeg
  • Вопрос задан
  • 968 просмотров
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Они зачёркиваются как раз, чтобы показать вам, что браузер их увидел, распознал, но приоритет выше у другого правила.

В вашем случае применимы оба селектора - и тот, что внутри медиа-выражения, и тот, что снаружи - поэтому применяется тот, что объявлен последним, т.е. с 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

Второе, разумеется, надёжнее.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы