[okazakiryohei]

【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】
【当該サイトのURL】

### 実現したいこと

.mb-section{
  display:none;
}

@media screen and (max-width: 500px) {
  .mb-section{
    display:block;
  }
  .pc-section{
    display:none;
  }
｝

スマホ画面では、背景画像のセクションを表示させて、PCで表示していたセクションを消す。
PC画面では、スマホ画面で表示していたセクションを消し、PC画面用のセクションを表示させたいです。

### 発生している問題

display:none; でセクションを消して、メディアクエリで display:block; で表示させたいのですが、HTMLのコードごと消えてしまうため、再表示できない

♥ 0

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

[みしま]

こんばんわ。
セクションを選択している状態で、右側のブロックオプション→高度な設定→追加CSSクラスで、クラス名を追加されてCSSでカスタマイズもできなくはないと思います。しかし、セクションがどのように配置されているかと、クラスが正確に追加されているかなどが把握できませんので、あまり具体的にお伝えがしずらいです。

もし、２つのセクションを入れ子にされている場合は、子になっている側のセクションは親のセクションが非表示のときには消えるかと思います。子の要素にたいしてdisplay:block;を指定しても、外側の要素、親の要素が非表示であれば、中身も消えます。その場合、見た目を変えるためにセクションを入れ子にするのではなく、メディアクエリの指定で見た目の装飾を画面サイズによって変更されたほうがいいかと思います。

セクションをスマホ用とPC用で出し分けされたい場合は、２つのセクションを作って、それぞれのセクションを選択した状態で右側のブロックのオプション→表示設定（ウィンドウサイズ）で、スマートフォンで非表示などのトグルをそれぞれの状況にあわせてONにするのが手軽かと思います。

♥ 1

いいねをした人:

[キタジマ タカシ]

一応補足すると、みしまさんが書かれている

セクションをスマホ用とPC用で出し分けされたい場合は、２つのセクションを作って、それぞれのセクションを選択した状態で右側のブロックのオプション→表示設定（ウィンドウサイズ）で、スマートフォンで非表示などのトグルをそれぞれの状況にあわせてONにするのが手軽かと思います。

は Snow Monkey Editor プラグインの機能です。僕もこれを使うのが簡単だと思います。

HTMLのコードごと消えてしまうため、再表示できない

CSS では HTML のコードを消すことはできないので、本当に消えているのであれば記事の保存に失敗している？等、何か CSS 以外の問題があるのだと思います。

♥ 1

いいねをした人:

[okazakiryohei]

ご回答ありがとうございます。

ウィンドウサイズの設定で対応できました！

♥ 1

いいねをした人:

[投稿者]

投稿