How to equal the space in responsive header?
<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>