HTML CSS media запросы

[korozyan]

Всем привет!
Делаю адаптивную версиб сайта (под мобилы), возникла проблемма.
Основной CSS

.wrapper                       {
    border:1px solid transparent;
    width:1280px;
    height:1043px;
    margin:0;
    background-color:transparent;
                               }          
.header                        {
    border:1px solid #dce5f4;
    width:200px;
    height:43px;
    margin-top:-1045px;
    margin-left:49px;
    float:left; 
                               }                             
.nav_header                    { 
    border:1px solid #dce5f4;
    width:1054px;
    height:43px;            
    margin-top:-1045px; 
    margin-left:249px;
    background-color:#dce5f4;   
                               }
.pictures                      {
    border:1px solid #dce5f4;
    width:1254px;
    height:480px;
    margin-top:0px;
    margin-left:49px;
    float:left;
    background-color:white; 
                               }                                     
.content                       {
    border:1px solid #dce5f4;
    border-radius:0 0 0 10px;
    width:779px;       
    height:483px;
    margin-top:480px;
    margin-left:49px;
    font-family:Simple_l;
    font-size:18px;
    background-color:#dce5f4;           
                               }
.img_bablo                     {
    border:1px solid #dce5f4;
    width:540px;    
    height:306px;
    margin:auto;
    background-image:url(pictures/747.gif);
    
                               }                 
.footer                        {
    text-align:center;
    font-size:10px;
    padding-bottom:2px;
    
                               }                             
.adv                           {
    border:1px solid #dce5f4;
    width:474px;
    height:483px;
    margin-top:-485px;
    margin-left:829px;
    background-color:#dce5f4;
    border-radius:0 0 10px 0;
    font-family:Simple_l;
    font-size:18px;
    text-align:center;  
                               }
.ssilki                        {
    text-decoration: none;
    color:black;
    margin-left:-60px;
                               }    
.ssilki:hover                  {
    text-decoration: underline;
    color:blue;
                               }                               
.logo                          {  
    width: 200px;  
    height: 44px;  
                               }             
.adv_l                         {   
    width: 200px;  
    height: 44px;
    margin-left:-20px;
                               }    
                               }

Добавляю медиа запрос

@media all and (min-width: 320px) and (max-width: 321px) {
.wrapper                       {
    width:320px;
                               }                                                                    
                               }

После чего в браузере меняю ширину и ничего не происходит.
В чем может быть проблема?

Edited November 28, 2017 by korozyan

[AlexZaw]

http://prntscr.com/hgeip0 вот ваш .wrapper (обведен желтым бордером) в хтмл у него заданы только размеры и бекграунд, содержимого у него нет, соответственно  изменение его размеров, с учетом того как у вас расположены остальные элементы, на  весь остальной сайт не влияет.  

http://prntscr.com/hgem2y а вот враппер при срабатывании медиа запроса

как видите запрос отрабатывает нормально, но сама верстка сделана неправильно, положите все остальные элементы внутрь wrapper-а, поправьте расположение элементов и все заработает

Edited November 28, 2017 by AlexZaw

[klierik]

А проблема в чём?

[AlexZaw]

(min-width: 320px) and (max-width: 321px) не смущает то что запрос срабатывает в диапазоне двух пикселей?

[korozyan]

4 минуты назад, klierik сказал:

А проблема в чём?

Когда меняю разрешение экрана, то сайт не адаптируется под основной див wrapper, я его указал. Все перерыл, ничего не помогает.

3 минуты назад, AlexZaw сказал:

(min-width: 320px) and (max-width: 321px) не смущает то что запрос срабатывает в диапазоне двух пикселей?

я и без максимальной ширины пробовал, всеравно также

[AlexZaw]

Сделайте без минимальной ширины, потому что иначе у вас запрос работает так - если ширина больше 320 то применить стили, иначе использовать те что применяются без медиа запроса

[korozyan]

2 минуты назад, AlexZaw сказал:

Сделайте без минимальной ширины, потому что иначе у вас запрос работает так - если ширина больше 320 то применить стили, иначе использовать те что применяются без медиа запроса

Всеравно не работает.

[AlexZaw]

Все прекрасно работает https://jsfiddle.net/AlexZaw/ktx34dt4/

[korozyan]

3 минуты назад, AlexZaw сказал:

Все прекрасно работает https://jsfiddle.net/AlexZaw/ktx34dt4/

Может html код скинуть?

[AlexZaw]

Скиньте, но не думаю что ошибка в нем, если только нет опечатки в имени класса.

Сам по себе запрос, если нормально указан диапазон, отрабатывает нормально. Можете целиком архив скинуть, может у вас где то ниже в css файле есть еще запросы в которых переопределяется поведение wrapper

[korozyan]

4 минуты назад, AlexZaw сказал:

Скиньте, но не думаю что ошибка в нем, если только нет опечатки в имени класса.

Сам по себе запрос, если нормально указан диапазон, отрабатывает нормально. Можете целиком архив скинуть, может у вас где то ниже в css файле есть еще запросы в которых переопределяется поведение wrapper

https://yadi.sk/d/t8QGbA243Q8Qhk

[AlexZaw]

Запрос у вас срабатывает, но вы этого не видите потому что .wrapper у вас пустой. Задайте цвет бордеру и увидите что все работает. А вот про  то, что верстка сделана неправильно разговор отдельный.

[korozyan]

9 минут назад, AlexZaw сказал:

Запрос у вас срабатывает, но вы этого не видите потому что .wrapper у вас пустой. Задайте цвет бордеру и увидите что все работает. А вот про  то, что верстка сделана неправильно разговор отдельный.

Дал цвет бордеру и все-равно не работает, выставляю разрешение 320x500 

13 минуты назад, AlexZaw сказал:

Запрос у вас срабатывает, но вы этого не видите потому что .wrapper у вас пустой. Задайте цвет бордеру и увидите что все работает. А вот про  то, что верстка сделана неправильно разговор отдельный.

Может браузер?