0

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.

How to fix this? You can see the mobile version here

CSS (one of the CSS for image header in 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>
Praveen Puglia
  • 5,577
  • 5
  • 34
  • 68
User014019
  • 1,215
  • 8
  • 34
  • 66

1 Answers1

-2

try using % instead of em. em unit should be used by font relative size. it doesn't work well on various devices if you're using it for padding/margin.

take a look: Why em instead of px?

Community
  • 1
  • 1
Fazri Alfan Muaz
  • 17
  • 1
  • 3