title: Whitespace below div only on Android
body: <p>This is really weird. Whenever I go to view my website on my Android Google Pixel, there is whitespace. However, on Chrome with the size of my phone, there is none. Sorry for no pic, as imgur is for some reason rejecting my snapshot (1.1mb).</p>
  
  <pre><code>html,body{ 
      height: 100% !important; 
  }
  
  #nav{
      position: fixed;
      width: 100vw !important;
  }
  #headerContainer{
      display: flex;
      height: 100vh;
      background-image: url('/img/info.jpg');
      background-position: center;
      background-size: cover;
      align-items: center;
      justify-content: center;
      background-attachment: fixed;
  }
  #headerContent{
      text-align: center;
      color: white;
      margin-top: 5px;
      font-size: 22.5px;
  }
  #headerContent hr{
      width: 75%;
      height: 2px;
      border: none;
      background-color: white;
  
  }
  .blog{
      display: inline !important;
      border: 2px solid grey;
  }
  #about{
      background-image: url('/img/about.jpg');
      background-size: cover !important;
      background-position: left;
      height: 60vh;
  }
  #about h2{
      text-align: center;
  }
  #about p,#about h2{
      position: relative;
      background-color: rgba(145,134,115,0.5);
      margin: 0;
      width: 25%;
  }
  @media only screen and (min-width: 600px){
      #about{
          display: block;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          margin: 0 !important;
      }
      #about p{
          width: 25%;
          height: 93.9%;
          padding-top: 2.5%;
      }
  }
  @media only screen and (min-width:500px) and (max-width: 600px){
      #about{
          height: 100%;
      }
  }
  @media only screen and (max-width: 500px){
      html,body{ 
          height: 100% !important; 
      }
      #headerContent p{
          font-size: 32px !important;
      }
      #headerContainer{
          background-attachment: fixed;
      }
      #about{
          display: block;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
      }
      #about p,#about h2{
          display: block;
          top: 0%;
          left:0%;
          width:45%;
          margin: 0 !important;
          padding: 0 !important;
      }
      #nav{
          position: relative !important;
          margin: 0 !important;
          padding: 0 !important;
      }
  }
  </code></pre>
  
  <p>It is really weird. I have looked this issue up and no one has had this one specifically.</p>
  
  <p><a href="https://i.stack.imgur.com/ma9Bc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ma9Bc.png" alt="enter image description here"></a></p>