this is my code which I want to make responsive I tried adding media queries but I couldn't figure out how to make it work with my code, I even tried setting the width to 100% but still I don't know how it works a simple explanation of how to sort it out would be very helpful for me and thank you in advance.
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>
<ul id = "menu">
<li><a id = "cinfo" > <img style="left: -10px; top: 18px;"id = "drop" src =
"images/drop.png"> Course Info</a>
<ul>
<li><a id = "htm" href="htmlCourse/htmlcourse.html">HTML</a>
<ul>
<li><a id = "lec" href="htmlCourse/htmlcourse.html">Lectures</a>
<li><a id = "tut" href="htmlCourse/htmlcourse.html">Tutorial</a>
<li><a id = "Lab" href="htmlCourse/htmlcourse.html">Labs</a>
</ul>
</li>
<li><a id = "cs" href="cssCourse/csscourse.html">CSS</a>
<ul>
<li><a id = "cslec" href="cssCourse/csscourse.html">Lectures</a>
<li><a id = "cstut1" href="cssCourse/csscourse.html">Tutorial</a>
<li><a id = "csLab1" href="cssCourse/csscourse.html">Labs</a>
</ul>
</li>
<li><a id = "java" href="jsCourse/jscourse.html">JavaScript</a>
<ul>
<li><a id = "javalec" href="jsCourse/jscourse.html">Lectures</a>
<li><a id = "javatut" href="jsCourse/jscourse.html">Tutorial</a>
<li><a id = "javaLab" href="jsCourse/jscourse.html">Labs</a>
</ul>
</li>
</ul>
</li>
</ul>
<a id = "droparrow" href="#droppage" > <img style="left: -40px; top: 0px widt;"id = "drop2"
src = "images/drop.png"> </a>
<a style="position: absolute; bottom: 20px; left: 700px;" name="droppage"></a>
<a id = "droparrow" href="#uppage" > <img style="left: -40px; top: 0px widt;"id = "drop3"
src = "images/drop.png"> </a>
<a style="position: absolute; top: -8px; left: 700px;" name="uppage"></a>
</body>
</html>
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{
position: absolute;
width: 59px;
height: 0px;
left: 692px;
top: 49px;
border: 1px solid #383C46;
transform: rotate(90deg);
}
#rect3{
position: absolute;
width: 166px;
height: 59px;
left: 1470px;
top: 20px;
}
#drop{
position: absolute;
left: 795px;
top: 34px;
width: 30px;
height: 35px;
}
#drop2{
position: absolute;
left: 795px;
top: 34px;
width: 60px;
height: 60px;
}
#drop3{
position: absolute;
left: 795px;
top: 700px;
width: 60px;
height: 60px;
transform: rotate(180deg);
}
h{
position: relative;
width: 317px;
height: 59px;
left: 389px;
top: 26px;
font-size: 25px;
}
#cinfo{
position: absolute;
top: 5px;
left: 20px;
font-size: 20px;
text-decoration: none;
cursor: pointer;
}
#getstarted{
position: absolute;
text-transform: uppercase;
width: 317px;
height: 59px;
left: 1000px;
top: 30px;
font-size: 20px;
text-decoration: none;
}
#html{
position: absolute;
width: 200px;
height: 280.26px;
left: 400px;
top: 1800px;
}
#css{
position: absolute;
width: 200px;
height: 280.26px;
left: 850px;
top: 1800px;
}
#js{
position: absolute;
width: 200px;
height: 280.26px;
left: 1300px;
top: 1800px;
}
#droparrow{
position: absolute;
left: 67%;
top: 35%;
}
#menu, #menu ul{
margin: 0;
padding: 0;
list-style: none;
}
#menu{
position: absolute;
width: 900px;
left: 721px;
top: 12px;
border-radius: 6px;
}
#menu::before, #menu::after{
content: '';
display: table;
}
#menu:after{
clear: both;
}
#menu li{
float: left;
box-shadow: 1px 0 0 #444;
}
#menu a{
float: left;
padding: 12px 30px;
text-transform: uppercase;
text-decoration: none;
color: white;
}
#menu ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 70px;
left: 1px;
z-index: 1;
background:#383C46;
transition: all .3s ease-in-out;
}
#menu li:hover > ul{
opacity: 1;
visibility: visible;
margin: 0;
background: rgb(58, 67, 94);
}
#menu ul ul{
top: 0;
left: 150px;
margin: 0 0 0 20px;
}
#menu ul li{
float: none;
display: block;
border: 0;
background:rgba(0, 0, 0, 0.25);
text-align: center;
}
#menu ul a{
padding: 10px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: uppercase;
}
#menu ul a:hover{
background: rgb(31, 31, 44);
}
CodePudding user response：
I would suggest you try and use percentages instead of pixels while setting properties like the width to your elements. Try and also avoid using IDs for styling because I think they are mainly meant for DOM manipulation. Always ensure that you group your HTML elements in a single container if at all you want your page to be responsive. So you can add:
<div class="container">
//page contents
</div>
and then ensure all your contents are inside that container. You can also wrap your navigation elements inside the nav element. e.g
<nav>
<ul>
<li><a href="/"></a></li>
<li><a href="/"></a></li>
</ul>
</nav>
Such are the best practices that you should ensure that you follow while writing code.