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
    Commented 11 мая 2017 в 12:11
1

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

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

Сделайте так

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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