Home > Blockchain >  All elements of the page move after changing the size of the window
All elements of the page move after changing the size of the window

Time:04-16

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  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 >
      <i  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 >
        <div >
       <p>Dolore consequuntur sunt dolores pariatur, labore excepturi adipisci aliquam exercitationem autem dignissimos, quisquam praesentium, laboriosam nam velit.</p>
      </div>
      </div>
      <div >
      <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  id="btn-div">
          <button id="btn-2"><a href="#"></a><b>Buy NOW!</b></button>
      </div>
  </div>
  <div >
      <div >
          <div >
              <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 >
              <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 >
                        <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 >
                    <div >
                        <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 >
                        <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 >
                        <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 >
                        <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 >
    <button  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;
}

CodePudding user response:

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

  • Related