html – How to put text on two sides of an image responsively?-ThrowExceptions

Exception or error:

It’s very simple. I just need to put two lines of text on either side of an image which is centered on my landing page. I don’t know how to make it responsive except for using position: absolute. How can I do this without having to use position: absolute.

I tried using flexbox but it seems like it won’t let me adjust the position of my text freely as the items are literally adjacent to each other.

Here’s the code employing flexbox:

<div class="overall">
  <div class="hi">
    <p>OH <br>GOSH <br> HI!</p>
  </div>
  <div class="human-container">
    <img src="img/landing page human.svg" onmouseover="this.src='img/landing page human 2.svg'"
      onmouseout="this.src='img/landing page human.svg'">
  </div>
  <div class="my-name">
    <p>MY<br> NAME<br> IS <span class="Ray">Ray</span></p>
  </div>
</div>
How to solve:

I would go simply by following these steps:
– Add “float: left;” to the following classes: “.overall”, “.hi”, “.human-container” and “.my-name”.
– Add an id(#) to the img and give-it a float:left; and a width:100%; too.
– Give to class “.hi” a width: 5%;
– Give to class “human-container” a width:90%;
– Give to class “my-name” a width:5%.

This should do it.
😀

Leave a Reply

Your email address will not be published. Required fields are marked *