@media экранный запрос не работает

Я создал сайт (довольно новый для html/css) и некоторые запросы @media не работают. Идея для отображения контейнера1 95% экрана, на экране менее 500 пикселей.@media экранный запрос не работает

благодарит заранее!

См код ниже:

#container1 { 
    float: left; 
    max-width: 45%; 
    min-height: 320px; 
    padding:20px; 
    margin: 1px; 
    border: solid #ffffff; 

} 

#container1:hover { border:solid #000000; 
} 
#container1:hover { background-color: antiquewhite; 
} 

@media screen and (max-width: 500px) { 

    #container1 { 
    width: 95%; 
} 
}

источник

2016-09-24 gazywazy

PS: У меня есть , включенный в html. – gazywazy

max-width: 45% будут по-прежнему применяться к # контейнеру1, когда экран меньше 500 пикселей, вы должны установить max-width: none; в запросе на медиа. – Fionna

pps: он также работает на другом div OK, с теми же утверждениями – gazywazy

Вы max-width: 45%; набор на нем в предыдущей декларации. Перейдите на:

@media screen and (max-width: 500px) { 

    #container1 { 
     width: 95%; 
     max-width: none; 
    } 
}

источник

2016-09-24 16:31:40

Большое спасибо. Теперь видно! – gazywazy

Вы также должны переписать максимальную ширину! В противном случае max-width: 45%; по-прежнему активен.

источник

2016-09-24 16:32:16

ответ

Смежные вопросы