Je travaille sur un projet de pratique pour apprendre quelques-uns des principaux fondements de la CSS, et HTML. Actuellement, je vais avoir du mal à obtenir mon page web pour devenir sensibles, avec des requêtes de média, j'ai d'autres projets que les requêtes de média travailler avec, mais celle-ci, spécifique n'est-ce pas, toutes les solutions?
<!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;}}
***Je suis d'essayer de simplement changer la couleur du texte du titre lorsqu'il est réduit en dessous de 500 px, je ne peux pas sembler obtenir des requêtes de média à fonctionner même avec une conception de base. ***