Здравствуйте! Помогите, пожалуйста, советом: пытаюсь с помощью медиа-запросов отрегулировать ширину шапки и контента, но не выходит. Мне нужно, чтобы если экран устройства менее 1024 px, поля не показывались, а шапка и контент занимали 100% экрана, на широкоэкранных мониторах чтобы шапка и контент занимали 53%, остальное, соответственно, поля. Прописывала, вроде бы, правильно:
@media screen and (max-width: 1024px) {
#main {
width: 100%;
margin: 0;
padding: 0;
}
#header {
width: 100%;
margin: 0;
padding: 0;
}
}
#header {
background-image: url(../images/header.jpg);
width: 53%;
height: 239px;
background-repeat: no-repeat;
padding: 0px;
margin: auto;
border: 1px solid #CCC;
}
#main {
width: 53%;
min-height: 800px;
height: auto;
margin: auto;
background-color: #F5F5F5;
border: 1px solid #CCC;
overflow: auto;
font-family: serif;
}
Проверяла неоднократно на устройствах с разрешением менее 1024 px - правила не работают, все равно появляются поля и контент с шапкой занимают 53 %, отчего получается тоненькая полоска (. Что я не так делаю? Может, медиа-запросы не в файл стилей нужно записывать? Как еще можно осуществить задумку? Пробовала также max-device-width, все равно не работает.