Как исправить странный конфликт @media?

Question

@ конфликт медиа?

Я выполняю два медиа-запроса, чтобы изменить заполнение и выравнивание div (.contact-info) в зависимости от размера экрана:

@media only screen and (min-width: 1501px) and (max-width: 5000px) {
  .contact-info {
      padding-top: 198px !important;
      text-align: left !important;
  }
}

@media only screen and (min-width: 0px) and (max-width: 1500px) {
  .contact-info {
      padding-top: 0px !important;
      text-align: center !important;
  }
}

К сожалению, кажется, что первый @media даже не активируется, когда он связан с div .contact-info. Только второй, похоже, связан с div .contact-info, так что в итоге все получается несвязным.

Я прикрепил изображение для справки.

Answer 1

Ваш код работает нормально! Хотя, как показал приведенный выше ответ, полезно проявлять осторожность со своей спецификой, проблема здесь не в том, что вы указали медиа-запросы, а они разные. Ваш код работает нормально. Я пробовал это здесь: https://codepen.io/kdgyimah/details/GRZRpMm [https://codepen.io/kdgyimah/details/GRZRpMm][1]

Я изменил цвета фона, когда вы попадаете в указанные вами точки останова, и это работает

Вы уверены, что вы отключили кеш в своем браузере? Страница может загружать сохраненный кеш / версию более старой css версии до добавления этого кода. В зависимости от используемого браузера решение может отличаться, но в Chrome:

1. Нажмите кнопку «Меню» в правом верхнем углу, затем выберите «Подробнее инструменты »>« Инструменты разработчика ». Вы также можете перейти на этот экран, нажав Ctrl + Shift + I для Windows и Linux или Command + Option + I для Ma c OS X.
2. Появится окно Dev Tools.
3. Выберите «Сеть», установите флажок «Отключить кеш».

Если вы используете firefox, используйте этот для отключения кеша : https://dzone.com/articles/how-turn-firefox-browser-cache

И перезагрузите страницу. Это должно загрузить самую последнюю или сохраненную версию вашего CSS.