[Ei]

【お使いの Snow Monkey のバージョン】

バージョン: 20.0.1

【お使いの Snow Monkey Blocks のバージョン】

バージョン 19.0.1

【お使いの Snow Monkey Editor のバージョン】

バージョン 7.0.1

【お使いのブラウザ】

GoogleClome

【当該サイトのURL】

サンプル

Just another WordPress site

sample-nutrits2.work

 

### 実現したいこと

 

過去ログを調べたのですが、同じ質問がないため投稿致します。

トップページをテンプレートを「右サイドバー」にした時の、
スマホ表示で周りに隙間を無くしたい。

 

### 発生している問題

トップページに右サイドバーをおきたいと思っています。

しかし、スマホで表示した際に、周囲に隙間ができてしまい気になっています。こちらを削除し、スマホで画面いっぱいに表示したいと思っています。

### 試したこと

過去ログの参照。

不勉強で申し訳ございませんが、ご教授よろしくお願い致します。

♥ 0

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

[キタジマ タカシ]

これ結構ややこしくて、サイトの構造を考えないと適切な調整ができない可能性があります。例えばトップページはメインカラム・サイドバーに背景色があるからスマホ時の余白が気になるけど、下層ページでは背景色がないから余白を消すとコンテンツがぴったりになってしまうとか。

現状トップページしか無い？ので他のページとマッチするかわかりませんが、とりあえず下記の CSS で余白は消えます。

以下ブラウザサイズが 1024px 未満のときにコンテンツエリアの左右の余白を消すサンプル。

@media not all and (min-width: 1024px) {
    .l-contents__container {
        padding-right: 0;
        padding-left: 0;
    }
}

♥ 0

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

[Ei]

キタジマ様
ありがとうございました！

解決いたしました。満足いくデザインにできました。

♥ 1

いいねをした人:

[投稿者]

投稿