title: How to equal the space in responsive header?
body: <p>I have a big header image in homepage. I managed to make the image responsive in mobile version but I have difficult to manage the spaces between button and text after bottom. The spaces is not the same in every mobile screen. Sometimes the spaces is bigger.</p>
  
  <p>How to fix this? You can see the mobile version <a href="http://www.responsinator.com/?url=www.homecredit.ph%2FtestEnvironment%2F" rel="nofollow">here</a></p>
  
  <p>CSS (one of the CSS for image header in mobile version)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media (max-width: 520px) {
    .home-header-div {
      height: 750px;
    }
    .home-header-h1 {
      font-size: 2em;
      text-align: left !important;
      width: 100% !important;
      margin: 0.75em 0 0 0 !important;
      padding-left: 0.35em !important;
    }
    .home-header-h3-mv {
      padding: 8em 0.75em 0 0.75em;
      display: block;
      line-height: 1.25em;
      font-weight: 300;
      font-size: 1em;
    }
    .home-header-button {
      font-size: 1em;
      top: 33em;
      position: absolute;
      float: none;
      margin: 0 auto;
      display: block;
      text-align: center;
      width: 90% !important;
      line-height: 1.20em;
    }
    .home-header-p-mv {
      margin: 27em auto;
      font-size: 1em;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;a class="button-125em button-all home-header-button" href="/calculate-your-loan/" target="_blank"&gt;&lt;span class="calculator"&gt;Calculate your loan now&lt;/span&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>