title: CSS Web page not responsive when using vh and vw
body: <p>I have following, simple web page. Here I have used vh for image height. But when I resize it to small screen sizes, the size of the background section doesn't resize properly. </p>
  
  <p>Are there any solutions for this problem without remvoing vh.</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;style&gt;
  
     section{
         background-color: rgb(200,200,200);
         padding: 10px 0px 30px 0px;
     }
  
     .edit_image img{
         max-height: 80vh;
         padding: 30px 30px 30px 30px;
      }
  
     &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-full" style="padding: 20px;"&gt; 
          &lt;section&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-md-12 col-sm-12  text-center"&gt;
                  &lt;div class='edit_image' img_id=0&gt;&lt;img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'&gt;&lt;/div&gt;           
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Wrong (Small screen):</strong></p>
  
  <p><a href="https://i.stack.imgur.com/y5ttJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y5ttJ.png" alt="Wrong"></a></p>
  
  <p><strong>Correct (Normal Web page):</strong></p>
  
  <p><a href="https://i.stack.imgur.com/FxE4k.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FxE4k.jpg" alt="Correct"></a></p>