How do I keep my elements/images from moving when I resize my web browser?

Admin 1
Viewed 70

I'm trying to keep all of my elements centered in my page, but whenever I resize my web browser everything turns into a squashed mess. I've been trying to deal with this problem for a couple of days now, but nothing I've done seems to work. I've looked at a lot of sources to see what the problem is (looking up youtube tutorials, making sure all my measurements were in pixels, using wrappers, etc). I'm new to coding (only about a month in), so I'm most definitely overlooking something.

This is how I want my website to look

This is an example of how my website looks when the page is resized

Here's my HTML:

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>J and R Rentals</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
  </head>
  <body class= "body">


<div class="top-container">
  <div id="wrapper">
  <h1 class="title">J and R Rentals</h1>
    <p class="motto">Tired of old broken down rentals? You deserve to rent a brand new one.</p>
    <img class="trees-one" src="002-rural-1.png" alt="">
    <img class="trees-two" src="001-rural.png" alt="">
    <img class="clouds-one" src="clouds.png" alt="">
    <img class="clouds-two" src="clouds.png" alt="">
    <img class="mountain-one" src="mountain.png" alt="">
    <img class="trees-three" src="001-rural.png" alt="">
    <img class="forest-one" src="forest.png" alt="">
    <img class="house-one" src="residential.png" alt="">
    <img class="house-two" src="residential-1.png" alt="">
  </div>
</div>

and here's my CSS:

#wrapper {
  background-color: #cffffe;
  margin: 0 auto;
  margin-bottom: 30px;
    padding-top: 400px;
}

.body {
  margin: 0;
}

.title {
  color: #0f4c75;
  font-size: 70px;
  text-align: center;
  position: relative;
  bottom: 350px;
  font-family: 'Roboto', sans-serif;
}

.motto {
  color: #0f4c75;
  font-size: 40px;
  text-align: center;
  position: relative;
  bottom: 350px;
  font-family: 'Roboto', sans-serif;
}

.trees-one {
  position: absolute;
  bottom: 343px;
  width: 300px;
}

.trees-two {
  position: absolute;
  width: 300px;
  bottom: 343px;
  right: 0px;
}

.clouds-one {
position: absolute;
  width: 200px;
  top: 40px;
  left: 200px;
}

.clouds-two {
  position: absolute;
  width: 200px;
  top: 40px;
  right: 200px;
}

.mountain-one {
  position: absolute;
  width: 300px;
  bottom: 343px;
  right: 300px;
}

.trees-three {
  position: absolute;
  width: 300px;
  bottom: 343px;
  left: 300px;
}

.house-one {
  position: absolute;
  width: 300px;
  bottom: 343px;
  left: 600px;
}

.house-two {
  position: absolute;
  width: 300px;
  bottom: 343px;
  right: 600px;
}

.forest-one {
  position: absolute;
  width: 355px;
  bottom: 343px;
  right: 800px;
}

I'd really appreciate any help I can get; thank you in advance!

css html
2 Answers
user_115211570

Your images are set using px at a defined size, so as the window width shrinks, they stay the same causing overlapping and that 'squashed' look

Using vw (view width), you can get the browser to resize each image to a percentage of the width of the current window width (1vw is 1% of width, 67vw is 67% of width)

You can also position them at a percentage point of the current width using vw (20vw to the left or right etc) and the browser repositions them accordingly

Using z-index, you can layer each image on top of each other, (z-index:0 is at the back, z-index:1...2...3 sits on front, the higher the number ,they will be in front of the lower number

Here is an example of using vw for image size and position and using z-index to position them on top of each other.

For this to work you need to wrap all elements in a wrapper with relative position for all the absolute positioning to function within that wrapper, just make the wrapper your whole page size, or whatever you need ;)

Check out my codepen example: layering and autowidth

HTML

<div class="wrapper">
  <h1 class="title">J and R Rentals</h1>
  <p class="motto">Tired of old broken down rentals? You deserve to rent a brand new one.</p>
  <img src="https://picsum.photos/seed/10/200/300" class="img1 all">
  <img src="https://picsum.photos/seed/10/200/300" class="img2 all">
  <img src="https://picsum.photos/seed/11/200/300" class="img3 all">
  <img src="https://picsum.photos/seed/11/200/300" class="img4 all">
  <img src="https://picsum.photos/seed/12/200/300" class="img5 all">
  <img src="https://picsum.photos/seed/12/200/300" class="img6 all">
  <img src="https://picsum.photos/seed/13/200/300" class="img7 all">
  <img src="https://picsum.photos/seed/13/200/300" class="img8 all">
</div>

CSS

.wrapper{
  position:relative;
  height:200px;
  background-color:lightBlue;
}
.title, .motto{
  z-index:3;
  color:#2333a7;
  text-shadow: 0 0 3px #fff;
  font-family:arial;
  position:absolute;
  width:100%;
  text-align:center;
  font-size:2.8vw;
}
.motto{
  top:30%;
  font-size:1.7vw;
}
.all{
  position:absolute;
  z-index:1;
  bottom:0;
}
.img1{
  width:8vw;
  left:38vw;
  height:90%;
}
.img2{
  width:8vw;
  right:38vw;
  height:90%;
}
.img3{
  z-index:2;
  width:20vw;
  left:22vw;
  height:70%;
}
.img4{
  z-index:2;
  width:20vw;
  right:22vw;
  height:70%;
}
.img5{
  width:8vw;
  left:10vw;
  height:80%;
}
.img6{
  width:8vw;
  right:10vw;
  height:80%;
}
.img7{
  z-index:0;
  width:42vw; 
  left:6vw;
  height:60%;
}
.img8{
  z-index:0;
  width:42vw; 
  right:6vw;
  height:60%;
}
user_23740090
Related