Почему не работает @media запрос?

Question

[LoonTiG]

Здравствуйте, возникла проблема с media запросами
Есть вот такой код

@media(max-width: 1200px) {
	.bash > img {
		left: 40px;
	}
	.head > div > ul > li {
		font-size: 14px;
	}
	.background > h1 {
		font-size: 31px;
		max-width: 600px;
		line-height: 55px
	}
	.right-column > .phone > p.colored {
  		padding-top: 16%;
    	font-size: 22px;
	}

	.right-column > .phone > p {
	    font-size: 21px;
	}
	#pleft {
		left: 0;
	}
	#pright {
		right: 0
	}
	.map {
		margin-right: 10px;
	}

}
@media(max-width: 1100px) {
	.portfolio-track {
		width: 656px;
	}
	#pleft {
		left: 10%;
	}
	#pright {
		right: 10%
	}
	.contacts-content form > input, .contacts-content form> textarea {
		width: 27%;
	}
	.contacts-content form > input:focus, .contacts-content form> textarea:focus {
		width: 27%;
	}
	.contacts-content form > input:focus {
		height: 42px;
	}
	.contacts-content form > textarea:focus {
		height: 140px;
	}
	.overview {
		width: 50%
	}

}
@media(max-width: 1000px) {
	.nav {
		padding-left: 5%;
	}
	#page h5 {
	    margin-left: 5px;
	}
}

@media(max-width: 700px) {
	.left-column > p {
		display: none;
		color: #fff;
 	}
}

До него идут обычные стили Css
Проблема возникает с последним запросом (на 700px)
Стили в нем просто не работают
Причем если те же стили прописать в запросе на 1000px все будет вполне адекватно работать
В чем причина?

Comments

[Максим Тимофеев]

может потому что у вас девайс не max 700?

[Максим Тимофеев]

стоит открыть консоль и посмореть какие стили срабатывают и понять почему именно они.

[HamSter]

ну да, скорее-всего нужно поменять местами, стили для 700 поднять выше 1000 и 1200

[LoonTiG]

Максим Тимофеев: Я естественно проверяю на размере экрана менее 700px, в том то и дело, что оно не работает на таких экранах

[Максим Тимофеев]

LoonTiG: А что работает? Какая часть срабатывает?

[LoonTiG]

Максим Тимофеев: Работает все (То есть все стили прописанные для 1000px работают на экранах меньше 1000px, тоже самое с 1100 и 1200, не работают все стили прописанные для 700px (естественно на экранах < 700px))

Answer 1

[Etiene]

Бывает, когда пишешь код css через препроцессор Sass, когда какой-то элемент был не принят препроцессором, по причине ошибки в написании, последующие изменения в код не вносятся, до исправления предыдущей ошибки. Поэтому, когда пишешь media - команда не срабатывает, так как была совершена ошибка в коде до этого (система кривая, но так уж она работает). Советую воспользоваться препроцессором Prepros, он после каждого изменения указывает подтверждения правильности кода, либо указывает на ошибку.

Answer 2

[Александр]

https://jsfiddle.net/jr2qodkd/

Answer 3

[Максим]

@media screen and (max-width: 800px) {
  /* specific CSS */
}

@media screen and (min-width:480px) and (max-width:800px) {
  /* Target landscape smartphones, portrait tablets, narrow desktops

  */
}

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

Обратите внимание как написан Запрос
Источник