title: Footer on middle of the page
body: <p>I can't seem to find a way to keep my footer at the bottom of the page when the user zooms to or so 25%. But keep it in the right place when the user has the default zoom. I can just delete the whole footer section and it works for default zoom. I've been reading a lot but can't seem to get it working.</p>
  
  <p>Here are some screenshots of what I mean:</p>
  
  <p><a href="https://i.stack.imgur.com/IyuEy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IyuEy.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/OZ2Z1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OZ2Z1.png" alt="enter image description here"></a></p>
  
  <pre><code>.footer {
      background-color: #171717;
      bottom: 0;
      width: 100%;
      padding: 25px 0;
      margin-top: -3em;
  }
  </code></pre>
  
  <p>More context: </p>
  
  <pre><code>html {
      height: 100% !important;
  }
  
  body, html {
      position: relative !important;
  }
  
  body {
      min-height: 100%;
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      overflow-x: hidden !important;
      color: #838282;
      font-family: 'Open Sans', sans-serif;
  }
  </code></pre>
  
  <p>I am using bootstrap. Please, any idea is appreciated, thanks.</p>