Здравствуйте! Столкнулась с такой странностью, при верстке с определенного момента медиа-запросы перестали работать без !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.
В чем может быть причина и как с этим справиться?