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

Question

[Андрей Неумыванный]

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

Обнаружил, что если перед запросом на мобилу стоит запрос на 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



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

Если ставить !important тогда все ок, применяет, но не очень хочется

Answer 1

[Danny Arty]

Поставьте для tablet условие min-width

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

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

Comments

[Андрей Неумыванный]

Проблема в том, что там разные значения, а если отдельно ставить, то десктоп на 980, также применит эти стили

Answer 2

[Егор Живагин]

У вас что-то со сборкой стилей, я почти уверен, что в конечном файле css правила для мобилы получаются выше, чем для таблета

Comments

[Андрей Неумыванный]

Тут этот проект, в папке build 3 файла webpak, если не сложно не могли бы проверить, может взгляд со стороны поможет, а то я уже психанул и решил переделать все медиазапросы)