# セクションの余白を調整したい

**URL:** <https://community.shopify.com/t/topic/321334>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [May 9, 2024, 8:11am UTC](https://community.shopify.com/t/topic/321334 "2024-05-09T08:11:06Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマを使用しているページで「迅速な注文リスト」セクションの下部余白に関する質問です。

**問題点:**
- PC表示では問題ないが、スマホ表示時に不自然な余白が発生
- 添付画像では文字数選択箇所の下側に妙な空きがある

**解決方法:**
回答者がカスタムCSSでの調整方法を提案:
```css
.quick-order-list__container {
  padding-bottom: 0px;
}
```
このコードをセクションのカスタムCSSに適用することでスマホ表示時のpadding値を調整できる。

**結果:**
質問者が提案されたコードを試したところ、希望通りのレイアウトに変更できたと報告し、解決済み。

<div class="post-metadata">

**Author:** ![morita\_2](https://avatars.discourse-cdn.com/v4/letter/m/f08c70/32.png) [@morita\_2](https://community.shopify.com/u/morita_2)\
**Post date:** [May 9, 2024, 8:11am UTC](https://community.shopify.com/t/topic/321334/1 "2024-05-09T08:11:06Z")

</div>

かなり初歩的な質問になるかと思いますが、同様の質問のコードを試しても変化が無く、質問させてください 🙏

ThemeはDawnを使用しております。

ページ内のセクションで「迅速な注文リスト」を使用しているのですが、このセクション下部の空白を

調整したいと思っております。

PC の場合は問題無いのですが、スマホ表示の場合、気持ちの悪い余白が生じてしまい、困っています。

CSSでの調整になるかと思いますが、具体的に何を入力するのが正解なのかが分かりません。

※添付画像をご参照ください。数字を選ぶ箇所の下側が妙に空いてしまうのが気になっております。

お手数をおかけしますが、お教えいただけましたら幸いです。

どうぞ宜しくお願いいたします。

 ![スクリーンショット 2024-05-09 17.01.15.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/3/3/0/33017d2a594253c7a64562ab2867ee2bda1c9a0f.png)

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [May 9, 2024, 12:09pm UTC](https://community.shopify.com/t/topic/321334/2 "2024-05-09T12:09:20Z")

</div>

質問拝見しました。

スマホ表示の時にpaddingの数値を調整すればいいかと思います。

以下cssをセクションのカスタムcssに適用すれば余白が調整されます。

```markup
.quick-order-list__container {
  padding-bottom: 0px;
}

```

ご参考までにしてください！

なにかご質問があれば、お気軽にご相談ください。  
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。  
何卒よろしくお願いします。

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![morita\_2](https://avatars.discourse-cdn.com/v4/letter/m/f08c70/32.png) [@morita\_2](https://community.shopify.com/u/morita_2)\
**Post date:** [May 9, 2024, 12:50pm UTC](https://community.shopify.com/t/topic/321334/3 "2024-05-09T12:50:06Z")

</div>

株式会社フルバランスさま

ご回答いただき有難うございます。

また、試してみたところ無事希望通りのレイアウトに変更出来ました！！

ご丁寧にお教えいただき、有難うございました 🙌