'All elements of the page move after changing the size of the window
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>[email protected]</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 1:[1]
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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | fmsthird |