Я работаю над практическим проектом, чтобы изучить некоторые основные основы CSS и HTML. В настоящее время у меня возникают проблемы с тем, чтобы моя веб-страница стала отзывчивой, с помощью медиа-запросов у меня есть другие проекты, с которыми работают медиа-запросы, но этот, в частности, не является решением?
<!DOCTYPE html>
<link rel="stylesheet" href="resumecss.css">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<title></title>
<meta name="description" content="Our first page">
<div class="box">
<img class="chung" src="chungus.png">
<h1 class="top">Cameron Marshall</h1>
</div>
<div class="container">
<div class="a">Contact Info:</div>
<div class="b">Skills:</div>
<div class="c">Objective:</div>
<div class="d">Work Experience:</div>
<div class="e"></div>
</div>
</body>
</head>
</html>
body{
margin:0;
padding:0;
height:100%;
}
.box{
background-color:lightblue;
height:350px;}
img{
height:200px;width:200px;
border-radius:50%;
border:solid 2px black;
display: block;
margin-left: auto;
margin-right: auto;
background-color:white;
position:relative;
top:20px;}
.top{
text-align:center;
font-size:4rem;
position:relative;
top:20px;}
.container{
max-width:100%;
margin-left: auto;
margin-right: auto;}
.container{
width:50%;
height:100%;
border: 8px solid black;
display:flex;
flex-wrap: wrap;
}
.a{
width:100%;
height:200px;
background-color:grey;}
.a {text-align:center;}
.b{
width:50%;
height:600px;
background-color:lightgrey;}
.c{
width:50%;
height:600px;
background-color:lightgrey
;}
.d{
width:100%;
height:400px;
background-color:white;}
.e{
width:100%;
height:200px;
background-color:grey;}
@media screen and(max-width:500px){
h1{color:blue;}}
***Я пытаюсь просто изменить цвет текста заголовка, когда он свернут ниже 500 пикселей, кажется, я не могу заставить какие-либо медиа-запросы работать даже с базовым дизайном. ***