title: 100% viewport height working on large monitor but not laptop?
body: <p>I'd like to make my hero image to fit 100% height of the viewport. I achieved this by adding <code>height: 100vh;</code> to the class="video-hero" (stretches the image gradient) and added to increase the image size added a class to the image <code>video-hero-placeholder-small.jpg</code> with  <code>height: 100vh;</code>.</p>
  
  <p>However this is resulting in an odd grey section to the right of the image (when on my laptop) but appears to not be an issue on my large side monitor.</p>
  
  <p>I have a min-width of 100% if when removed centers the image on my laptop but not on my large side monitor. Could this be related to the issue?</p>
  
  <pre><code>.video-hero__media-wrapper
  {
  min-width : 100%
  }
  </code></pre>
  
  <p>Video demonstration: <a href="https://www.screencast.com/t/Oftl68noHO" rel="nofollow noreferrer">https://www.screencast.com/t/Oftl68noHO</a></p>
  
  <p>Video demonstration explained: On the right side of the video (my laptop screen) the hero image doesn't stretch full width (instead shows the odd grey section), I then bring it onto my large side monitor and it mysteriously works?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="hero"&gt;
      &lt;div class="video-hero video-hero--featured"&gt;&lt;/div&gt;
      ::before
      &lt;div class="video-hero__media-wrapper"&gt;
      &lt;picture&gt;
             &lt;img class="big-home-image" src="https://wb.workbooks.com/resources/=QzM/using-crm-on-a-laptop.jpg" alt="Using Workbooks CRM on a laptop"&gt;
      &lt;/picture&gt;
          &lt;/div&gt;
      &lt;div class="video-hero__content"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;div class="video-hero__content"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.video-hero {
      height: 100vh;
      padding-top: 420px;
      position: relative;
      overflow: hidden;
      z-index: 1;
  }
  </code></pre>
  
  <p><strong>Screen resolution of large monitor:</strong>
  1920x1200</p>
  
  <p><strong>Screen resolution of laptop:</strong>
  1366x768</p>
  
  <p><strong>URL of website:</strong>
  <a href="https://workbooks.com" rel="nofollow noreferrer">https://workbooks.com</a> - Live site so I've not applied the changes to the viewport height.</p>