title: How can I make the caption responsive?
body: <p>I'm trying to make an image with an caption on the left-middle. The caption should be always at the left-middle or anywhere on the left side of the image and it's size should be vary with browser size simultaneously.
  The problem is that when I resize the window than size of the caption won't change and It's position is also not fixed w.r.t the image.</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>.page-overview{
          width: 100%;
          border: 1px solid black;
      }
  
      .overview-content img{
          width: 100%;
      }
      
      .caption{
          position: absolute;
          top: 20%;
          left: 18px;
          font-size: 80%;
          font-family: 'Source Sans Pro', sans-serif;
          z-index: 1;
      }
      .caption span{
          display: block;
          margin: 8px 0;
          padding: 10px 17px;
          border-radius: 3px;
          background-color: #00000033;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;test YOU&lt;/title&gt;
    
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!--Here can have other content too--&gt;
      &lt;div class="page-overview"&gt;
          &lt;div class="overview-content"&gt;&lt;a href="#"&gt;&lt;img src="https://images5.alphacoders.com/481/481903.png" alt="Delilious &amp; Yum" height="auto"&gt;&lt;/a&gt;
              &lt;div class="caption"&gt;
                  &lt;span&gt;Test your best here&lt;/span&gt;
                  &lt;span&gt;It's Yum &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>