Как работать с @media запросом?

html:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/reset.css">
	<style>
  
  </style>
</head>
<body>
	<div  " class="container">
	<img src="img/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="">
	<img src="img/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="">
	<img src="img/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="">
	<img src="img/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="">
	<img src="img/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="">
	<img src="img/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg" alt="">
	</div>

</header>
</body>
</html>

css:
body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; } }
     .container{width: 600px;}

.container{
	width:1200px;
	margin-left:auto;
	margin-right:auto;

}

почему ширина не изменяется?
  • Вопрос задан
  • 177 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Отформатируйте, и посмотрите почему
body {
    background: #f0f0f0;
}

@media screen and (max-width: 600px) {
    body {
        background: #fc0;
    }
}

.container {
    width: 600px;
}

.container {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;

}

UPD: а, еще также, при одинаковом селекторе у двух стилей (в данном случае у обычного и в media), приоритетом будет тот, что ниже в css файле. Поэтому поместите ваш media запрос ниже.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы