[ひろ]

【お使いの Snow Monkey のバージョン】25.1.5
【お使いの Snow Monkey Blocks のバージョン】20.3.0
【お使いの Snow Monkey Editor のバージョン】9.3.0
【お使いのブラウザ】chrome

お世話になります。

質問させて下さい。

### 実現したいこと

セクション(背景画像)ブロックの高さ広めの設定をレスポンシブに応じて変更したいと考えています。

下記画像の通り広めに設定しました。

タブレット表示の時に高さが広いままで表示されます。

タブレット時のみこの高さを低くしたいと考えています。

 

### 発生している問題

検証画面から問題は下記画像のコードだと特定しました。

セクションブロックには『footer-contact』というクラス名をつけて、タブレット表示の時のみこのvhを変更しようとしましたが実装できておりません。

 

### 試したこと

下記CSSをあてました。(タブレットサイズ時にあてています)

.footer-contact {
height: 400px!important;
}

何も変わらず下記のコードも試しました。

.smb-section–wide {
–smb-section–min-height: 40vh;
}

現状高さが変更できておりません。

 

お手数ですがよろしくお願い致します。

♥ 0

いいねをした人: 居ません

[GONSY]

少しメンテナンス性は落ちますが、頻繁に画像などを変更することがなければ、Snow Monkey Editor の 表示設定（ウィンドウサイズ）には、ブロック単位でデバイスごとに表示・非表示を切り替える機能があります。
それを利用することを前提に、レイアウトや画像の異なるセクションブロック（PC用、タブレット用、スマホ用）を3つ設置して、各デバイスのみで表示するようにすれば、意図した感じに近づけることができそうです。
 

 
アイデアの1つとしてご参考にしていただければと思います。

♥ 1

いいねをした人:

[ひろ]

なるほど、そちらの方がお手軽ですね。

ありがとうございます。

♥ 1

いいねをした人:

[キタジマ タカシ]

CSS でやる方法も試してみたのでおいておきますね。
ビューポートが 1024px 未満は min-height を 50vh にする例です。

@media not all and (min-width: 1024px) {
  .smb-section--wide {
    --smb-section--min-height: 50vh;
  }
}

♥ 0

いいねをした人: 居ません

[投稿者]

投稿