title: How to make text and image responsive?
body: <p>I am working on this website in SquareSpace, and I know how to layer images on top of one another and make them responsive, but I have been unsuccessful with text. I want this text to adjust to screen size along with the heart image.</p>
  
  <p>I know that using "vh, vw, vmin, vmax" adjusts the size accordingly, BUT, when I use the viewport units, it's almost as if the sizing decreases at twice the rate of the rest of the content on the page.</p>
  
  <p>Here is what I have (lacking squarespace set CSS styles of course):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
    .kppr
    {
      margin-top: -8%;
      margin-left: 8%;
    }
    .kppr p
    {
      color: #89d4e8;
      font-size: 400%;
      font-weight: bold;
    }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: relative; top: 0; left: 0;" class="kppr"&gt;
    &lt;p&gt;
      kids play &amp;nbsp&amp;nbsp&amp;nbsp&amp;nbspparents relax
    &lt;/p&gt;
    &lt;/div&gt;
    &lt;div style="position: absolute; top: 42%; left: 40.5%;" class="heart"&gt;
      &lt;img src="http://static1.squarespace.com/static/55bed56ee4b04fdc6e0dd0d8/t/5759e5882b8ddea12fed577b/1465509256880/STL-Home-Heart.png" alt="Kids play, parents relax"/&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>