Почему отрабатывают не все @media?

Question

[Иван Иванов]

/*Для разрешений 1366px и меньше*/
 @media screen and (max-width: 1366px){	  
	div.news-list-mobile
	{
		height:70%;
	}
}
 
   /*Для разрешений 1280px и меньше*/
 @media screen and (max-width: 1280px){	  
	div.news-list-mobile
	{
		height:84%;
	}
}
 
/*Для разрешений 1024px и меньше*/
@media screen and (max-width: 1024px){	  
	div.news-list-mobile
	{
		height:39%;
	}
}
 
 /*Для разрешений 960px и меньше*/
@media screen and (max-width: 960px){	   
	div.news-list-mobile
	{
		height:84%;
	}
}
  
/*Для разрешений 854px и меньше*/
@media screen and (max-width: 854px){	  
	div.news-list-mobile
	{
		height:93%;
	}
}
 
 /*Для разрешений 812px и меньше*/
@media screen and (max-width: 812px){	  
	div.news-list-mobile
	{
		height:114%;
	}
}

почему-то отрабатывает только до 1024px, ниже игнорирует... Более того, даже при нажатии F12 в браузере, в CSS блоке показывает переопределение стилей, только до 1024;

Answer 1

[Иван Иванов]

Разобрался, надо было в head прописать

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

[display: block]

Всё отрабатывает.
https://codepen.io/anon/pen/mLLrxx
Может crtl+f5 поможет? (очистить кэш)

Comments

[Иван Иванов]

Разобрался, надо было в head прописать

<meta name="viewport" content="width=device-width, initial-scale=1">