Медиа запросы. CSS. Не работает элемент. Как исправить?

Question

[Антон Вертов]

Доброго времени суток. Есть сайт, с большим количеством стилей 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);
	} }

Но ничего не происходит. Никак он на эти медиазапросы не реагирует. Некоторые медиазапросы уже прописаны в других файлах. Могут ли они конфликтовать между собой или где кроется ошибка ? Подскажите пожалуйста. Заранее большое спасибо.

Comments

[Ankhena]

Но ничего не происходит. Никак он на эти медиазапросы не реагирует.

А что должно происходить, если значения всех свойств одинаковые?

Еще у вас перекрываются диапазоны. Когда будут стоять реальные свойства - будет каша.

Answer 1

[Евгений]

Зачем вы дублируете один и теже стили у элемента, если они не меняются? И зачем столько условий? в head прописно ?

Answer 2

[Егор Живагин]

CSS файл подключен? Кэш сброшен?

Адддд из условий, я бы переписал это просто на (max-width), если бы поддерживал

Comments

[Антон Вертов]

css подключен и кэш сбросил, всё равно не применяется..

[Егор Живагин]

Антон Вертов: скорее всего условия ложные. Убирайте какие-то из них, проверяйте