On my homepage, I have a large header image that is responsive in the mobile version. However, I am having trouble managing the spacing between the button and text below it. The spacing varies on different mobile screens and sometimes appears larger than intended.
How can I fix this issue? You can view the mobile version here
CSS (One of the CSS codes used for the image header in the mobile version)
@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;
}
<a class="button-125em button-all home-header-button" href="/calculate-your-loan/" target="_blank"><span class="calculator">Calculate your loan now</span></a>
}