[ゆきんこ]

【お使いの Snow Monkey のバージョン】15.8.1
【お使いの Snow Monkey Blocks のバージョン】12.4.0
【お使いの Snow Monkey Editor のバージョン】6.1.0
【お使いのブラウザ】Chrome / Safari
【当該サイトのURL】https://3551.jp/lp1/

### 実現したいこと

ページ上部の余白を消したい

### 発生している問題

いくつかcssを記述しましたが、余白が残ってしまいます。

### 試したこと

以下のcssを記述しています。
（フォーラムでいろいろ調べていろいろ書いていますが、あえてそのままにしておきます…）

.l-contents__inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.c-entry__header {
  display: none;
}

.page .l-contents__inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page .c-entry__header {
  display: none;
}

.c-entry__content,
.p-entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

.l-contents__inner:first-child {
  padding-top : 0;
}

お忙しい中大変恐縮ですが、ご確認のほど宜しくお願い致します。

♥ 0

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

[Olein_jp]

こんばんわ。

言われている余白部分ですが、ファーストビュー（「未公開不動産を〜」という部分）の上部のちょっとした白い隙間のことでしょうか？

♥ 0

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

[ゆきんこ]

ご返信いただきありがとうございます。

おっしゃる通りです。

また、SPサイズにすると、その余白が大きくなります。

引き続き、宜しくお願い致します。

♥ 0

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

[Olein_jp]

こちらは画像ブロックに標準で付いているスタイルと、Snow Monkey 独自のスタイルで起きている現象です。

単純にこの現象を改善したいという場合には、以下のように対応されると改善されると思います。しかし、強めのスタイルになっているので、全体的なCSS設計と照らし合わせて、最適な詳細度にしてあげることが望ましいですのでご確認ください。

まず、スマホ表示用とPC表示用という形で画像ブロックを２つ設置して切り替えられていると思いますので、それらに同じCSSクラス名（以下では例として forced-no-top-margin とします）を編集画面から設定してください。

そして、追加CSSなどに以下のスタイルを加えてください。

.forced-no-top-margin {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

こちらで全ブラウザで画像ブロックの上部マージン・パディングを0にしてくれます。

お試しください。

♥ 0

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

[ゆきんこ]

お世話になっております。
こちら試したところ、解決できました…！
大変助かりました、誠にありがとうございます。

次回以降同じ質問をしないで済む様しっかりメモしておきます！
今後とも、宜しくお願い申し上げます。

♥ 0

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

[キタジマ タカシ]

あー、Snow Monkey の各ブロック間の余白は隣接セレクタで実現していますが、デバイスサイズごとの画像を並べているから、画像自体は見えなくても隣接セレクタが発動してしまって余白がつくということですね。これ結構悩ましいですね…。

♥ 0

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

[投稿者]

投稿