title: Fitting Text to a Container when I zoom in
body: <p>I'm trying to build a responsive website, everything Is ok except that text inside that cloud that says "heyyy!..." as you see In the image below It's ok when I'm not zooming I like that behaviour</p>
  
  <p><a href="https://i.stack.imgur.com/wnCVg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wnCVg.png" alt="enter image description here"></a></p>
  
  <p>but when I zoom In I'm ending up with this ugly behaviour</p>
  
  <p><a href="https://i.stack.imgur.com/p4QZY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p4QZY.png" alt="enter image description here"></a></p>
  
  <p>I don't know how can I solve this problem I tried to put the entire unit of the robot image and the speaking cloud and the text inside a <code>div</code> and applying the position <code>relative</code> to that <code>div</code> and the position <code>absolute</code> to all the items inside it but it didn't work, any solutions please and thank you in advance</p>
  
  <p>this is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .header-box {
      width: 100vw;
      height: 90vh;
      background-color: #33cccc;
      -webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
      clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
      position: relative;
    }
  
    .main-nav {
      display: flex;
      list-style-type: none;
      justify-content: space-around;
      width: 100vw;
      text-align: right;
    }
  
    .main-nav__link {
      text-decoration: none;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
      color: #ffffcc;
    }
  
    .text {
      font-family: Roboto;
      font-weight: bold;
      font-size: 20px;
      color: #ffffcc;
      height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      align-content: center;
    }
  
    .name {
      font-size: 1rem;
      display: block;
      animation-name: moveInLeft;
      animation-duration: 2s;
    }
  
  .vector-1{
    position:  relative;
    height: 37vh;
  
  }
    .img-dialogue {
      width: 60%;
          position: absolute;
          left: 20%;
          bottom: 57%;
          z-index: -1;
    }
  
    .dialogue {
      font-family: Roboto;
      color: #33cccc;
      position: absolute;
      top: 24px;
      left: 55px;
      display: inline-block;
    }
  
    .img-header {
      width: 60%;
      position: absolute;
      bottom: 9px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header-box"&gt;
  &lt;ul class="main-nav"&gt;
    &lt;li class="main-nav__items"&gt;&lt;a class="main-nav__link" href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li class="main-nav__items"&gt;&lt;a class="main-nav__link" href="#"&gt;Projects&lt;/a&gt;&lt;/li&gt;
    &lt;li class="main-nav__items"&gt;&lt;a class="main-nav__link" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="text"&gt;
    &lt;h1 class="big-heading"&gt;&lt;span class="name"&gt;M.Amine Elwere&lt;/span&gt; Front-end &lt;br /&gt; Web developer&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="vector-1"&gt;
    &lt;img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt=""&gt;
    &lt;img src="../vector/Png for the web/png-dialogue-2.png"    data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt=""&gt;
    &lt;h1 class="dialogue"  data-aos="fade-up" data-aos-duration="5000"&gt;HEYY!...&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>