Align an image and making it responsive

Issue

I want an image to when I resize the page, the image goes below the text. Currently the image has float: right and when I resize the page, the image goes below the text but stays in the right of the page and I wanted it to go to the left of the page.

Curently
How it should be

/* TEXT */

section.QuemSou {
  float: left;
  overflow-wrap: break-word;
  font-size: 1.3em;
  margin-top: 40px;
  margin-left: 5%;
  font-family: 'Century Gothic', sans-serif;
}

p#Quem_Sou {
  line-height: 30px;
}


/* IMAGE */

div.divimgMAIN {
  float: right;
  /* FAZER COM QUE NÃO SE USE FLOAT: RIGHT; */
  margin-top: 40px;
  margin-right: 10%;
  margin-bottom: 2%;
}

img#imgMAIN {
  border-width: 2px;
  border-color: black;
  border-style: solid;
  padding: 5px 5px 5px 5px;
}

<section class="QuemSou">
  <h2>Quem Sou</h2>
  <p id="Quem_Sou">
    <b>Nome:</b> Francisco Costa<br>
    <b>Idade:</b> 19 anos<br>
    <b>Atividade:</b> Estudante<br>
    <b>Onde vivo:</b> Santa Maria da Feira
  </p>
</section>

<div class="divimgMAIN">
  <img id="imgMAIN" src="./images/linus.png">
</div>

If I use float: left it does what I need but the image is too close to the text and if I try to add any kind of padding or margin, the image goes down when it hits the margin or padding and not the text.

Solution

There are so many ways to solve this problem (usually call it responsive).

The most common way is to use @media in css.

-css

  @media only screen and (max-width: 500px) {
    div.divimgMAIN {
      float: left;
    }

How about this?

I hope this answer to help you.

Good luck.

Answered By - J.Porter