Andy8888
@Andy8888
Frontend Developer

Почему не срабатывает media-запрос?

Не могу разобраться почему не срабатывает запрос.

Обнаружил, что если перед запросом на мобилу стоит запрос на Tablet, то не срабатывает, например этот код не работает

&-dropdown-facilities {
    margin-top: 30px;
    @media all and (max-width: $smDesktopWidth) {
      order: 3;
      margin-top: 0;
    }

    @media all and (max-width: $tableWidth) {
      margin-top: 30px;
      margin-right: 30px;
    }

    @media all and (max-width: $phoneWidth) {
      margin-top: 20px;
      margin-right: 0;
    }
  }


А этот РАБОТАЕТ

&-dropdown-guests {
    margin-top: 21px;
    @media all and (max-width: $smDesktopWidth) {
      order: 2;
      margin-top: 0;
      margin-right: 30px;
    }

    @media all and (max-width: $phoneWidth) {
      margin-top: 20px;
      margin-right: 0;
    }
  }


Вот так это выглядит в DevTools при экране 480px, он применяет 768px

5f48d0b63e133272143024.jpeg

Приоритет менял, выше или ниже перемещал код, не помогло

Если ставить !important тогда все ок, применяет, но не очень хочется
  • Вопрос задан
  • 104 просмотра
Пригласить эксперта
Ответы на вопрос 2
DanArst
@DanArst
Э, Ойboy!
Поставьте для tablet условие min-width
@media all and (min-width: $phoneWidth) and (max-width: $tableWidth) {
      margin-top: 30px;
      margin-right: 30px;
    }


хотя по идее, когда два правила работают на один элемент, используется каскадное правило, т.е. применяется правило, которое находится ниже
Ответ написан
Krasnodar_etc
@Krasnodar_etc
little front
У вас что-то со сборкой стилей, я почти уверен, что в конечном файле css правила для мобилы получаются выше, чем для таблета
Ответ написан
Ваш ответ на вопрос

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

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