2

Здравствуйте! Столкнулась с такой странностью, при верстке с определенного момента медиа-запросы перестали работать без !important.

Не понимаю в чем причина и как этого избежать.

Привожу часть CSS кода

html {
-webkit-text-size-adjust: none;
}
.container {
    margin-top: 150px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
-webkit-justify-content: center;
    align-content: space-between;
-webkit-align-content: space-between;
    align-items: center;
-webkit-align-items: center;
    flex-direction: column;
-webkit-flex-direction: column;
}

@media screen and (max-width: 1024px) {
    .container {
  margin-top: 110px;
}
}

/* iPhone 6 Plus */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {
  .container {
  margin-top: 120px !important;
}
}

В коде видно, что первый медиа-запрос сработал обычно, во втором для 414px уже пришлось применять !important.

В чем может быть причина и как с этим справиться?

1

3 ответа 3

5

Здравствуйте! А каким образом тестируете? В каких браузерах не работает как надо?

Я проверила Ваш код у себя в браузерах на ноутбуке (последние версии Chrome и Firefox) - все ОК и без !important.

В IE11 заработает, только если:

  • убрать в последнем правиле only,
  • вместо min-device-width и max-device-width написать min-width и max-width.

Я не профи, но вижу, что копать нужно в сторону этих двух моментов.

1
  • Спасибо за наводку, я не очень поняла почему так было. Убрала все only и после этого заработало без !important. min-device-width и max-device-width оставила без изменений.
    – Alla
    11 мая 2017 в 12:11
1

Добавляйте медиа-запросы в конце css файла.

1
  • я так и делаю, они стоят в конце
    – Alla
    5 июн 2017 в 7:19
0

Сделайте так

@media screen 
and (min-width: 740px)
and (max-width: 1024px) {
    .container {
  margin-top: 110px;
}
}
1
  • спасибо,но все-равно не работает без !important
    – Alla
    11 мая 2017 в 6:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.