How to make image responsive when window resizes? CSS & HTML5

Question

I want the image that I'm using to be to the right of a paragraph during normal window size. This I don't have an issue with.

But when I make the window smaller, I run into this issue:

The image is on top of the text when the browser size is reduced. When the page is reduced, I would like the image to be aligned under the text.

.soon {
  margin: 30px;
}

.leafPic {
  margin-left: 60%;
  margin-top: -15%;
}

@media screen and (max-width:600px) {
  .img {
    width: auto\9;
    /* ie8 */
  }
}

<section class="soon">
  <h2>LLORUM ISPUS DOR!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolorem reprehenderit illo officia<br> ex quidem aut veniam modi numquam iusto, ipsam placeat dolorum quae eum vero! Eveniet esse<br>Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Voluptate dolorem reprehenderit illo officia<br> enim molestiae delectus modi officiis ab porro, maiores, dolores consequuntur ipsum expedita!Lorem <br> ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolorem reprehenderit illo
    officia<br> ex quidem aut veniam modi numquam iusto, ipsam placeat dolorum quae eum vero! Eveniet esse<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolorem reprehenderit illo officia<br> enim molestiae delectus modi officiis
    ab porro, maiores, dolores consequuntur ipsum expedita!</p>
</section>

<div class="leafPic">
  <img src="bloomingflower.png" height="350" width="500" alt="Blooming flower">
</div>

I just made a runnable snippet for you and I suggest you edit your post again to add a valid link for the image (upload it to imgur for example). — ThS, Aug 10 '19 at 15:46
With Grids it's fairly easy to manage @media queries for items placement. You can check [this fiddle](https://jsfiddle.net/Pi_L/vwb1p6yh/) where i modified your code. — Pierre-Yves Legeay, Aug 10 '19 at 16:05

score -1 · Answer 1 · answered Aug 10 '19 at 15:54

You'll need to reset the margin-left to 0 on div.leafPic.

for demo purposes, I used a placeholder image so the intended result can be seen. Reset the img's src attribute to your image's path.

.soon {
  margin: 30px;
}

.leafPic {
  margin-left: 60%;
  margin-top: -15%;
}

.leafPic img {
  height: 350px;
  width: 500px;
}

@media screen and (max-width:600px) {
  .leafPic {
    margin-left: 0; /** reset **/
  }
}

<section class="soon">
  <h2>LLORUM ISPUS DOR!</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolorem reprehenderit illo officia<br> ex quidem aut veniam modi numquam iusto, ipsam placeat dolorum quae eum vero! Eveniet esse<br>Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Voluptate dolorem reprehenderit illo officia<br> enim molestiae delectus modi officiis ab porro, maiores, dolores consequuntur ipsum expedita!Lorem <br> ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolorem reprehenderit illo
    officia
    <br> ex quidem aut veniam modi numquam iusto, ipsam placeat dolorum quae eum vero! Eveniet esse<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolorem reprehenderit illo officia<br> enim molestiae delectus modi officiis ab
    porro, maiores, dolores consequuntur ipsum expedita!</p>
</section>

<div class="leafPic">
  <img src="https://via.placeholder.com/350" alt="Blooming flower">
</div>

How to make image responsive when window resizes? CSS & HTML5

1 Answers1