Need help with bootstrap/flexbox on portfolio project

1

I want the image to change to the same height as my 3 lines of h1 elements. Then when the screen is narrow or its viewed from an iphone/smartphone I’d like the 3 lines of h1 elements to be the same width as the img. I tried flex stretch but I think I need another div. I worked on it for a while and but I can’t figure it out.

code pen link: https://codepen.io/DesignAttract/pen/XeQejV

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">  
</head>

<style>
  img{background-color: #89A4B2;
  border-radius: 10px;
  padding: 20px;   
  }
  
  h1{background-color: #80D2FF;
    border-radius: 10px;
  padding: 20px;
    font-family: 'Roboto Mono', monospace;
  }
  

  
</style>

<body>
  
<div class="container">
  <div class="row">
      <img src=https://image.flaticon.com/icons/svg/349/349356.svg height>
   <div class="col">
<h1>Hello</h1>
<h1>I'm K. McFarland</h1>
<h1>Aspiriing Web developer</h1>
  </div>
  </div>
</div>

</body>
2

Your link is empty.
And three things you need keep in mind:
1 - only one h1 tag must exist because h1 tag defines most important heading. and h6 the least important heading. Two most important things can’t exist.;
2 - Use bootstrap classes for your page. Not col class. Here is a link
3 - <img src="anypath.png"> or <img src="anypath.png" /> use but dont do <img src=anypath.png />. Read mor here.

Anyway if you want to display mobile friendly page or just change how does things looks like at your page read more about Cascading Style Sheets(CSS), Hyper Text Markup Language(HTML).
If you want to use Bootstrap (that you need for challange as main technology> read about it here.

3

Thanks for the help. I used bootstrap media-object class and it looks much better. Unfortunately my code was not saved after I fixed it. I’ll post the link again after I change the code to use media-object

4

I do not know why it happened but the link is still empty.
But it’s nice to hear that you managed it.
Feel free to ask questions.
Best regards.