html – CSS media queries assistance


I’m working on practice project to learn some of the corse foundations of CSS and HTML currently I’m having trouble getting my webpage to become responsive, I have other projects that media queries work with, but this one in specific isn’t, any 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;}}

Please assist. Other solutions have just told me the same thing, am I missing anything in my code?



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here