I have been trying to make my code responsive by adding media queries, but I am struggling to get it to work with the current setup. I even attempted setting the width to 100%, but still facing issues. I would really appreciate a simple explanation on how to resolve this. Thank you.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Development course</title>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>
<svg id = "rect1"></svg>
<svg id = "rect2"></svg>
<svg id = "rect3"></svg>
<a href = "htmlCourse/htmlcourse.html"> <img id = "html" src ="images/html.png"></a>
<a href = "cssCourse/csscourse.html"> <img id = "css" src ="images/css.png"></a>
<a href = "jsCourse/jscourse.html"> <img id = "js" src ="images/js.png"></a>
<style>
h, a{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: normal;
font-weight: bold;
line-height: 41px;
color: #FFFFFF;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
img:hover{opacity: 0.6; transform: scale(1.2); transition: 0.8s ease-in-out;}
img:not(:hover){transition: 0.5s ease-in-out;}
a:hover{text-shadow: 0 4px 4px rgb(0, 0, 0); transition: 0.8s ease-in-out;}
a:not(:hover){transition: 0.5s ease-in-out;}
</style>
<h style= "top: 27px;">Web Development Course</h>
<a id = "getstarted" href="#droppage">Get Started</a>
...
CSS
body{
position: absolute;
width: 1440px;
height: 2420px;
background-color: #383C46;
}
#rect1{
position: absolute;
width: 1400px;
height: 59px;
left: 250px;
top: 20px;
background: #3F5577;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
#rect2{
...