WordPressテーマSANGOの質問

スマホで見たときにヘッダーの上に隙間ができる

May

2019/11/20

お世話になっております。

こちらの記事の”ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ”を施しておりますが、スマホで見たときにヘッダーの上に隙間ができてしまいます。（PCでは問題なし）

画像のサイズは2580 x 294 ピクセルです。

ロゴ画像に推奨サイズはない、との情報をこちらのスレッドで確認しましたが、スマホで見たときにヘッダーの上に隙間ができないように、ロゴ画像をいっぱいに表示するためにはどのように設定したらよいでしょうか？

ヘッダーのロゴ画像を横いっぱいに表示するカスタマイズ

コメントへの回答

サルワカくん

2019/11/20

お世話になっております。
以下のようなCSSを追加することで上の隙間がなくなります。

#logo a {
  vertical-align: top;
}

他の方法として、スマホ閲覧時にのみロゴ画像の高さを調整することもできます。

/*画面幅が520px以下の場合にのみ適用するCSS*/
@media only screen and (max-width: 520px) {
  .header--center #logo img {
    height: 62px; /* ロゴ画像の高さ */
    object-fit: cover; /* 左右にはみ出た部分を切り抜く */
  }
}
/*END 画面幅が520px以下の場合にのみ適用するCSS*/

よろしくお願いします。