Image moving on the screen when I change its size-CodePudding

Here's my site: https://katekarate.github.io/My-Site/.

The cloud image is ok, but the rainbow image is moving when I change the window size. I'm just a beginner and don't understand why it is happening.. please, help!

body {
  margin: 0 auto;
  text-align: center;
  font-family: 'Merriweather', serif;
}

h1 {
  margin: 0 auto 0 auto;
  font-family: 'Charmonman', cursive;
  font-size: 5.6rem;
  color: #11999E;
  line-height: 1.2;
}

h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  color: #11999E;
  font-weight: normal;
}

h3 {
  font-family: 'Montserrat', sans-serif;
  color: #30E3CA;
}

a {
  color: #30E3CA;
  text-decoration: none;
  margin: 20px;
}

a:hover {
  color: #E4F9F5;
}

hr {
  margin: 50px auto;
  border-bottom: none;
  border-top: 7px dotted #EAF6F6;
  width: 5%;
}

.top-container {
  background-color: #E4F9F5;
  position: relative;
}

.bottom-container {
  background-color: #11999E;
  position: relative;
  padding: 30px;
}

.contact-me {
  width: 50%;
  margin: 100px auto;
  line-height: 2;
}

.footer-end {
  color: white;
  font-size: 0.8rem;
}

.top-cloud {
  position: relative;
  top: 100px;
  left: 300px;
  width: 150px;
  height: 150px;
}

.bottom-cloud {
  position: relative;
  bottom: 300px;
  right: 50px;
  width: 150px;
  height: 150px;
}

.skill-row {
  width: 50%;
  margin: 100px auto;
  text-align: left;
  line-height: 2;
}

.profile-img {
  width: 20%;
  margin-top: 50px;
}

.coding-img {
  width: 25%;
  float: left;
  margin-right: 30px;
}

.teacher-img {
  width: 25%;
  float: right;
  margin-left: 30px;
}

.btn {
  background: #11cdd4;
  background-image: -webkit-linear-gradient(top, #11cdd4, #11999e);
  background-image: -moz-linear-gradient(top, #11cdd4, #11999e);
  background-image: -ms-linear-gradient(top, #11cdd4, #11999e);
  background-image: -o-linear-gradient(top, #11cdd4, #11999e);
  background-image: linear-gradient(to bottom, #11cdd4, #11999e);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #30e3cb;
  background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad);
  background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad);
  background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad);
  background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad);
  background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad);
  text-decoration: none;
}

<title>Kate Hyrenko</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Charmonman&amp;family=Merriweather&amp;family=Montserrat&amp;display=swap" rel="stylesheet">

<div >
  <img  src="images/cloud1.png" alt="cloud1-img">
  <h1>I'm Kate .</h1>
  <h2>a web developer.</h2>
  <img  src="images/cloud.png" alt="cloud-img">
  <img src="images/mountain.png" alt="mountain-img">
</div>
<div >
  <div >
    <img  src="images/girl.png" alt="profile-img">
    <h2>Hello.</h2>
    <p>I am actually an ESL teacher, who has just become a web developer.</p>
  </div>
  <hr>
  <div >
    <h2>My Skills.</h2>
    <div >
      <img  src="images/coding.png" alt="coding-img">
      <h3>Coding &amp; debugging</h3>
      <p>I am really interested in coding! I like HTML and CSS. I don’t understand JavaScript just yet, but I’m on my way to excellence. I like debugging my own work, because I can fix all my mistakes by my own!</p>
    </div>
    <div >
      <img  src="images/teacher.png" alt="teacher-img">
      <h3>Educating developing minds</h3>
      <p>Yes, it is stressful to be a teacher, yes I often complained, yes there’s a lot of work you have to do at home… But you can change someone’s life and teach kindness and compassion. It’s a priceless experience.</p>
    </div>
  </div>
  <hr>
  <div >
    <h2>Get In Touch</h2>
    <h3>I’m currently available for freelance work or internship.</h3>
    <p>If you are looking for someone who is still learning or just want to say hey, get in touch!</p>
    <a  href="mailto:[email protected]">CONTACT ME</a>
  </div>
</div>
<div >
  <a  href="https://www.linkedin.com/in/kate-hyrenko-30116a177/">LinkedIn</a>
  <a  href="https://www.instagram.com/katya_gyrenko/">Instagram</a>
  <a  href="https://www.facebook.com/katya.gyrenko/">Facebook</a>
  <p >© 2022 Kate Hyrenko</p>
</div>
<div style="position: static !important;"></div>

CodePudding user response：

The fix I think the easiest fix you can apply is to use absolute position instead of relative on your rainbow image.

.bottom-cloud {
  position: absolute;
  left: calc(50% - 400px);
}

With position absolute the element will be positioned relatively to its parent relative container. (With relative it's positioned relatively to its own initial position, which my change during screen resize)

The problem The problem is that .bottom-cloud is on relative position, that means when the initial position of that element is changed then the image will be shifted as well.

In your html you have 2 images - rainbow and mountain. On a big screen they are going to be rendered in a single row, but on a small screens the images will break in 2 lines, and then your bottom, right values are not valid anymore:

<!--
  big screen, 
  images in a single line, 
  `bottom` and `right` configured correctly
-->
<img>rainbow</img> <img>mountain</img> 


<!--
  small screen,
  images in 2 lines now as there is not enough space to keep them in a single line,
  now `bottom` and `right` configured incorrectly, because initial position of the rainbow element was changed
-->
<img>rainbow</img>
<img>mountain</img>

CodePudding user response：

Can you replace your code with this? And you should use CSS selectors.

.bottom-cloud {
    position: relative;
    right: 250px;
    width: 150px;
    height: 150px;
    top: 250px; 
}

<div >
    <img  src="images/cloud.png" alt="cloud-img">
    <img  src="images/cloud1.png" alt="cloud-img">
    <h1>I'm Kate .</h1>
    <h2>a web developer.</h2>
    <img src="images/mountain.png" alt="mountain-img">
</div>

CodePudding user response：

No quite sure what you want to achieve but you could handle the image position different on smaller screens, in this example I center the image when screen size is below 600px.

Learn more about media queries.

@media (max-width: 600px) {
  .button-cloud{
    width: 200px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}