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
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>
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.