CSS ve HTML'NİN bazı temel temellerini öğrenmek için bir uygulama projesi üzerinde çalışıyorum. Şu anda web sayfamın medya sorgularıyla yanıt vermesini sağlamakta sorun yaşıyorum, medya sorgularının çalıştığı başka projelerim var, ancak bu belirli bir çözüm değil mi?
<!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;}}
***Başlık metninin rengini 500 pikselin altına küçültüldüğünde değiştirmeye çalışıyorum, temel bir tasarımla bile çalışmak için herhangi bir medya sorgusu alamıyorum. ***