title: Making my site responsive for shorter screen
body: <p>I have the following basic layout</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>#sectionOne {
    height: 100vh;
    overflow: hidden;
  }
  
  #sectionTwo {
    height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="sectionOne"&gt;
    some content here
  &lt;/section&gt;
  
  &lt;section id="sectionTwo"&gt;
    some content here
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have been able to set the font size of the content in section one to be responsive according to different screen widths.</p>
  <p>However when the screen is wide enough but the height is relative shorter like surface laptop vs mac book air, I cannot see the full content of my section One, because it overflows. Is it because I am setting the height to be 100vh?</p>
  <p>I am actually a little bit confused here, if I am setting both of the sections to be of height 100vh, isn't that conflicting since apparently one of them cannot be 100vh if the other one is already 100vh?</p>