I am new to coding, my code moves when I change the size of the browser window (divs and pictures start moving up and down and as a result my web page can only be correctly visible in one window size.
What should I change to adapt the page to different screen sizes?
Please let me know if I have some other mistakes in the code as well.
Here is the code: https://codepen.io/btb8293/pen/WNdYrZj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio website</title>
<link rel="stylesheet" href="carsharing.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Plus+Jakarta+Sans:ital,wght@1,200&family=Work+Sans:ital,wght@0,200;1,200&display=swap');
</style>
<script src="https://kit.fontawesome.com/2d0427e8be.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<button class="btn" id="btn-1">PROPAGANDA</button>
<ul>
<li><a href="#contacts">Contacts</a></li>
<li><a href="#about">About</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
<div class="intro">
<i class="fa-solid fa-car-rear" id="car"></i>
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vel cupiditate soluta ratione nam non, officiis fugiat sunt, blanditiis nesciunt nemo ab eaque accusamus cum doloribus odio, vitae esse hic sed?</h1>
<div class="info-box">
<div class="text-in-the-box">
<p>Dolore consequuntur sunt dolores pariatur, labore excepturi adipisci aliquam exercitationem autem dignissimos, quisquam praesentium, laboriosam nam velit.</p>
</div>
</div>
<div class="text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni commodi maiores dolores quam accusamus, cupiditate explicabo suscipit fuga dolor libero obcaecati expedita illo ipsum quibusdam ea. Odit omnis nostrum enim!</p>
</div>
<div class="btn" id="btn-div">
<button id="btn-2"><a href="#"></a><b>Buy NOW!</b></button>
</div>
</div>
<div class="work">
<div class="container">
<div class="text">
<h1>Dear All</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis porro aut rem possimus veritatis est, non cupiditate hic voluptates exercitationem eius enim nam, odit unde nisi aliquam molestiae, assumenda velit?</p>
</div>
<div class="big-box-1">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam distinctio consequuntur atque dolorem quas quaerat iusto odio soluta illum asperiores, eaque dolorum adipisci vitae. Minima mollitia commodi iste voluptates enim.</p>
<img src="https://media.istockphoto.com/photos/lighthouse-picture-id139497126?k=20&m=139497126&s=612x612&w=0&h=742ggWJZuxPE0jOPXfEfXV__XQhsmWgNq3mHV2tBMwE=" width="200px" alt="">
</div>
<div class="big-box-2">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam distinctio consequuntur atque dolorem quas
quaerat iusto odio soluta illum asperiores, eaque dolorum adipisci vitae. Minima mollitia commodi iste
voluptates enim.</p>
<img src=https://cdn.pixabay.com/photo/2019/09/29/22/06/light-bulb-4514505_640.jpg width="200px" alt="">
</div>
<div class="small-boxes">
<div class="small-box-1">
<p>Nice view baby o go go and see anothe big city in your dreams</p>
<img src="https://cdn.pixabay.com/photo/2017/02/16/23/10/smile-2072907_640.jpg" width="200px" alt="">
</div>
<div class="small-box-2">
<p>Nice view baby o go go and see anothe big city in your dreams</p>
<img src="https://cdn.pixabay.com/photo/2017/02/16/23/10/smile-2072907_640.jpg" width="200px" alt="">
</div>
<div class="small-box-3">
<p>Nice view baby o go go and see anothe big city in your dreams</p>
<img src="https://cdn.pixabay.com/photo/2017/02/16/23/10/smile-2072907_640.jpg" width="200px"alt="">
</div>
<div class="small-box-4">
<p>Nice view baby o go go and see anothe big city in your dreams</p>
<img src="https://cdn.pixabay.com/photo/2017/02/16/23/10/smile-2072907_640.jpg" width="200px" alt="">
</div>
</div>
</div>
</div>
<div class="contacts">
<button class="btn" id="btn-1">PROPKA</button>
<div id="text-contacts"></div>
<p>2019-2022 copyrighted</p>
<p>+ 9-999-99-999</p>
<p>123@zaec.com</p>
</div>
</div>
</body>
</html>
* {
padding: 0 0;
margin: 0 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
font-family: 'Lato',
sans-serif;
font-family: 'Plus Jakarta Sans',
sans-serif;
font-family: 'Work Sans',
sans-serif;
}
nav {
height: 100px;
position: absolute;
}
#btn-1 {
background: pink;
margin-top: 20px;
margin-left: 20px;
width: 150px;
height: 50px;
border-radius: 20px;
webkit-box-shadow: 10px 10px 27px -16px rgba(0, 0, 0, 0.61);
-moz-box-shadow: 10px 10px 27px -16px rgba(0, 0, 0, 0.61);
box-shadow: 10px 10px 27px -16px rgba(0, 0, 0, 0.61);
cursor: pointer;
}
nav ul {
list-style: none;
margin-left: 35vw;
}
nav ul li {
display: inline;
margin: 40px;
}
nav a {
color: black;
text-decoration: none;
font-weight: bolder;
text-shadow: 1px 1px 13px rgba(150, 150, 150, 1);
}
.intro {
background: pink;
margin: 0 auto;
padding-top: 150px;
height: 110vh;
}
#car {
font-size: 250px;
color: black;
padding-left: 40vw;
margin-bottom: 50px;
text-shadow: 11px 11px 0px rgba(137, 137, 139, 0.5);
}
.intro h1 {
margin-bottom: 50px;
margin-left: 10vw;
margin-right: 10vw;
}
.text {
margin-bottom: 100px;
margin-left: 10vw;
margin-right: 10vw;
font-size: 20px;
}
.info-box {
width: 50vw;
height: 12vh;
border: 1px solid black;
margin-bottom: 50px;
margin-left: 25vw;
border-radius: 30px;
webkit-box-shadow: 10px 10px 27px -16px rgba(0, 0, 0, 0.61);
-moz-box-shadow: 10px 10px 27px -16px rgba(0, 0, 0, 0.61);
box-shadow: 10px 10px 27px -16px rgba(0, 0, 0, 0.61);
}
.text-in-the-box {
font-size: 18px;
text-align: center;
margin-top: 13px;
padding-top: 15px;
padding-bottom: 5px;
}
#btn-div {
margin-left: 43vw;
}
#btn-2 {
width: 180px;
height: 50px;
background: red;
border-radius: 20px;
font-size: 20px;
font-family: 'Lato',
sans-serif;
font-family: 'Plus Jakarta Sans', sans-serif;
font-family: 'Work Sans', sans-serif;
font-weight: 900;
cursor: pointer;
-webkit-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
color: white;
}
.work {
margin-top: 0px;
background: #F0F8FF;
height: 150vh;
}
.text h1 {
margin-bottom: 40px;
padding-top: 50px;
}
.big-box-1 {
width: 20vw;
height: 50vh;
border: 1px solid black;
margin-left: 25vw;
border-radius: 40px;
float: left;
margin-bottom: 50px;
-webkit-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
}
.big-box-2 {
width: 20vw;
height: 50vh;
border: 1px solid black;
float: right;
margin-right: 25vw;
border-radius: 40px;
margin-bottom: 50px;
-webkit-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
}
.big-box-1 p {
padding-top: 3vh;
padding-left: 10px;
padding-right: 10px;
}
.big-box-1 img {
width: 18vw;
height: 25vh;
margin-top: 4vh;
margin-left: 1vw;
margin-right: 1vw;
border-radius: 20px;
}
.big-box-2 p {
padding-top: 3vh;
padding-left: 10px;
padding-right: 10px;
}
.big-box-2 img {
width: 18vw;
height: 25vh;
margin-top: 4vh;
margin-left: 1vw;
margin-right: 1vw;
border-radius: 20px;
}
.small-box-1 {
margin-top: 100px;
width: 15vw;
height: 20vw;
border: 1px solid black;
float: left;
margin-left: 8vw;
margin-bottom: 20vh;
border-radius: 20px;
-webkit-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
}
.small-box-1 p {
padding-top: 3vh;
margin-bottom: 2vh;
padding-left: 5px;
padding-right: 5px;
}
.small-box-1 img {
width: 13vw;
height: 13vw;
padding-left: 1vw;
padding-right: 1vw;
padding-top: 1vh;
border-radius: 30px;
}
.small-box-2 {
margin-top: 100px;
width: 15vw;
height: 20vw;
border: 1px solid black;
float: left;
margin-left: 8vw;
margin-bottom: 20vh;
border-radius: 20px;
-webkit-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
}
.small-box-2 p {
padding-top: 3vh;
margin-bottom: 2vh;
padding-left: 5px;
padding-right: 5px;
}
.small-box-2 img {
width: 13vw;
height: 13vw;
padding-left: 1vw;
padding-right: 1vw;
padding-top: 1vh;
border-radius: 30px;
}
.small-box-3 {
margin-top: 100px;
width: 15vw;
height: 20vw;
border: 1px solid black;
float: left;
margin-left: 8vw;
margin-bottom: 20vh;
border-radius: 20px;
-webkit-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
}
.small-box-3 p {
padding-top: 3vh;
margin-bottom: 2vh;
padding-left: 5px;
padding-right: 5px;
}
.small-box-3 img {
width: 13vw;
height: 13vw;
padding-left: 1vw;
padding-right: 1vw;
padding-top: 1vh;
border-radius: 30px;
}
.small-box-4 {
margin-top: 100px;
width: 15vw;
height: 20vw;
border: 1px solid black;
float: left;
margin-left: 8vw;
margin-bottom: 20vh;
border-radius: 20px;
-webkit-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 28px -12px rgba(0, 0, 0, 0.75);
}
.small-box-4 p {
padding-top: 3vh;
margin-bottom: 2vh;
padding-left: 5px;
padding-right: 5px;
}
.small-box-4 img {
width: 13vw;
height: 13vw;
padding-left: 1vw;
padding-right: 1vw;
padding-top: 1vh;
border-radius: 30px;
}
.contacts {
height: 25vh;
background: pink;
}
.contacts p {
text-align: center;
}
>Solution :
You can use Media Queries to target different device viewports and apply specific styling. You can read more about responsive styling and viewports here and here