wordpress スマホ画面の高さを変更したい

Question

wordpress（xeory）で、メインビジュアル画像の高さを変更したいです。

スマホサイズの時だけ、高さを小さくする方法があれば、教えて下さい。

Answer 1

「いらない部分」を消して、「メイン画像」の高さを、画面いっぱいにしたい。ということでしょうか？

style.cssに

@media screen and (max-width:765px) {
  .画像のクラス名 {
  height: 100vh;
  }
  .いらない部分のクラス名 {
  display: none;
  }
}

などではいかがでしょうか？

@media screen and (max-width:767px)
という部分で画面の最大横幅を指定します。
スマホなら767pxとかが一般的かもしれません。
(ご参考：https://techacademy.jp/magazine/9369)

height: 100vh;
という部分で「画面高さいっぱいでお願い」という意味です。

ちなみに対象クラス名は、
➀F12をクリックして開発ツールを開く。
➁カーソルを対象に合わせてクリックする。
と開発ツールの中に表示されます。

Comments

[ld-]

ありがとうございます。

添付画像の「いらない部分」全体でメインビジュアルになっている為、メイン画像の上下がすごい余白になってしまいます。
メイン画像のサイズは添付画像の通り、そのままにしたいです。

ＰＣやタブレットの時は、問題ないのですが、スマホの時だけ、こうなります。
おそらく、ＰＣとスマホのメインビジュアルの高さが同じなので、メイン画像がスマホ用にレスポンシブした時に、メインビジュアル部分が残ってしまうのだと思うのですが、修正方法がわかりません。

Answer 2

@media only screen and (max-width: 767px) {
body.home #main_visual{
background-image: url( );
height:200px!important;
}}

Answer 3

あくまでもデベロッパーツール上での話ですが・・・

<div id="main_visual" style="height: 637px;">

という記述があり、何が何でも高さ６３７ピクセルにしなさいとなっているので、幅が狭まってもこの部分の高さは維持されるようです。

単純にこの部分を非表示にする

div#main_visual {
    display: none;
}

と上下の余分な部分はなくなりますが他に影響があるかもしれません