Sto lavorando su un progetto pratiche per imparare le fondamenta di CSS e HTML. Attualmente sto avendo problemi a trovare il mio sito, per diventare responsive con media query, ho altri progetti che in media query, ma questa in specifico non è, soluzioni?
<!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;}}
***Sto cercando di cambiare il colore del testo del titolo quando è ridotto a icona al di sotto di 500 px, I cant sembrano ottenere qualsiasi query supporti per funzionare anche con un design di base. ***