Доброго времени суток. Есть сайт, с большим количеством стилей css.
Я добавил элемент на сайте, хочу чтобы он нормально отображался и на компьютере и на телефоне.
Есть элемент стиля css следующего вида:
.formRes {
width: 540px;
position: relative;
margin: 10% auto;
padding: 20px 25px 10px 26px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #b3b3b3);
background: -webkit-linear-gradient(#fff, #b3b3b3);
background: -o-linear-gradient(#fff, #b3b3b3);
}
Я хочу сделать, чтобы в Айфоне 6, элемент отображался с другими размерами. (помещался в портретную ориентацию. Так как он вылазит за пределы экрана).
Пытаюсь сделать это так:
/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ .formRes {
width: 355px;
position: relative;
margin: 10% auto;
padding: 20px 25px 10px 26px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #b3b3b3);
background: -webkit-linear-gradient(#fff, #b3b3b3);
background: -o-linear-gradient(#fff, #b3b3b3);
} }
/* iPhone 6 portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ .formRes {
width: 355px;
position: relative;
margin: 10% auto;
padding: 20px 25px 10px 26px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #b3b3b3);
background: -webkit-linear-gradient(#fff, #b3b3b3);
background: -o-linear-gradient(#fff, #b3b3b3);
}}
/* iPhone 6 Plus landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ .formRes {
width: 355px;
position: relative;
margin: 10% auto;
padding: 20px 25px 10px 26px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #b3b3b3);
background: -webkit-linear-gradient(#fff, #b3b3b3);
background: -o-linear-gradient(#fff, #b3b3b3);
}}
/* iPhone 6 Plus portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ .formRes {
width: 355px;
position: relative;
margin: 10% auto;
padding: 20px 25px 10px 26px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #b3b3b3);
background: -webkit-linear-gradient(#fff, #b3b3b3);
background: -o-linear-gradient(#fff, #b3b3b3);
} }
/* iPhone 6 and 6 Plus */
@media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ .formRes {
width: 355px;
position: relative;
margin: 10% auto;
padding: 20px 25px 10px 26px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #b3b3b3);
background: -webkit-linear-gradient(#fff, #b3b3b3);
background: -o-linear-gradient(#fff, #b3b3b3);
} }
Но ничего не происходит. Никак он на эти медиазапросы не реагирует. Некоторые медиазапросы уже прописаны в других файлах. Могут ли они конфликтовать между собой или где кроется ошибка ? Подскажите пожалуйста. Заранее большое спасибо.
