0

ホームページに大きなヘッダー画像があります。モバイル版では画像をレスポンシブにすることはできましたが、ボタンと下のテキストの間のスペースを管理するのが困難です。スペースは、すべてのモバイル画面で同じではありません。場合によってはスペースが大きくなります。

これを修正する方法は？モバイル版はこちらからご覧いただけます

CSS（モバイル版の画像ヘッダー用CSSの一つ）

@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>

4

1 に答える 1

-2

%の代わりに使ってみてくださいem。em単位は、フォントの相対サイズで使用する必要があります。パディング/マージンに使用している場合、さまざまなデバイスでうまく機能しません。

見てみましょう:なぜ px ではなく em なのですか?

于 2016-06-07T06:28:02.740 に答える