В хроме не срабатываеет медиа-запрос при экране менее 784 (решено)

[nikki4]

Страница:

http://seositi.ru/

в мобильной версии разделы сайта должны быть во всю ширину.

@media only screen and (max-width: 479px) {
***
    .site-categories ul li {
        float: left;
        display: table;
        width: 96%;
        margin: 0 1% 20px;
        padding: 10px 1%;
    
//        border-radius: 5px;
        height: 100px;
        max-height: 100px;
    }

***
}

в лисе и Яб-е, все ок. а в хроме почему-то не срабатывает @media only screen and (max-width: 479px) {

и применяется прежний стиль, а именно

only screen and (max-width: 991px) and (min-width: 768px)

 

Попытался выяснить в чем дело:

Полностью очистил файл responsive.css и style.css

в style.css написал:

 

body {background: red;}

@media only screen and (max-width:784px) {
body {background: blue;}
}

везде все работает - красный, при экране с заданным размером - голубой фон.

стоит мне указать какое либо значение менее 784, например 783
 

body {background: red;}

@media only screen and (max-width:783px) {
body {background: blue;}
}

везде работает, а в хроме уже не работает и не применяется стиль

 

Нашел решение. Оказалось в html было не прописано, прописал - стало все ок.

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

 

Edited September 3, 2017 by nikki4