I’m trying to enlarge the image I’m using when the screen reaches a maximum width of 600px. I thought my media query below would’ve worked but is adding no effect when screen reaches that size.
<style>
#center {
display: block;
margin: auto;
width: 25%;
}
h2{
position: relative;
left: 15px;
}
body{
background: linear-gradient(90deg, #004ff9, #fff94c);
}
@media (max-width: 600px) {
img{
width: 40%;
}
}
</style>
<DOCTYPE html>
<head>
<title> Yanzoz </title>
<meta charset="utf-8">
</head>
<body>
<img src="../images/yanzoz-logo-remake.png" alt="Yanzoz" id="center">
<h2>Biography</h2>
</body>``