# Dawn「折りたたみ可能コンテンツ」セクション幅を上下のセクション幅に合わせたい

**URL:** <https://community.shopify.com/t/dawn/315096>\
**Category:** 技術的なQ＆A\
**Created:** [April 17, 2024, 7:45am UTC](https://community.shopify.com/t/dawn/315096 "2024-04-17T07:45:10Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマで商品ページをカスタマイズ中、「折りたたみ可能なコンテンツ」セクションの横幅が上下の「商品情報」や「マルチカラム」セクションより狭く、バランスが悪い状態になっている。

**解決方法:**
投稿者は類似投稿を参考にしたが解決できず質問。回答者が「折りたたみ可能なコンテンツ」セクションのカスタムCSSに以下のコードを追加することを提案:

```css
.collapsible-content-wrapper-narrow {
  max-width: none;
  padding: 0 5rem;
}
```

**結果:**
投稿者は `max-width: none;` だけでは画面いっぱいに広がってしまったが、上下セクションの幅である1000pxに合わせることで意図通りに調整できたと報告。問題は解決済み。

<div class="post-metadata">

**Author:** ![tororo](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@tororo](https://community.shopify.com/u/tororo)\
**Post date:** [April 17, 2024, 7:45am UTC](https://community.shopify.com/t/dawn/315096/1 "2024-04-17T07:45:10Z")

</div>

Dawnを使用。

デフォルトの商品テンプレートを使って、商品テンプレート作成しています。

「商品情報」セクションの下に「折りたたみコンテンツ」セクションを追加しましたが、「商品情報」セクションやその下に配した「マルチカラム」セクションの幅に対して、横幅が狭いためバランスが悪い状態です。

 ![スクリーンショット-2024-04-17-162349.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/1/6/b16b69d2efba75587fee44106747fa30932343a7.jpeg)

「折りたたみ可能なコンテンツ」セクションを上下のセクションの横幅に合わせたいのですが、どこを調整すればよいでしょうか？

類似投稿参考にしてみましたが、わかりませんでした。

[https://community.shopify.com/post/1993938](https://community.shopify.com/post/1993938)

おわかりになる方いらっしゃいましたら、ご指導頂けますと幸いです。

よろしくお願いいたいします。

---

<div class="post-metadata">

**Author:** ![improv](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/improv/32/59666_2.png) [@improv](https://community.shopify.com/u/improv)\
**Post date:** [April 17, 2024, 8:29am UTC](https://community.shopify.com/t/dawn/315096/2 "2024-04-17T08:29:55Z")

</div>

はじめまして。

「折りたたみ可能なコンテンツ」セクションのカスタムCSSに下記コードを入れることで対応可能かと思います。

```css
.collapsible-content-wrapper-narrow {
  max-width: none;
  padding: 0 5rem;
}

```

ご参考までに。

---

<div class="post-metadata">

**Author:** ![tororo](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@tororo](https://community.shopify.com/u/tororo)\
**Post date:** [April 17, 2024, 9:09am UTC](https://community.shopify.com/t/dawn/315096/3 "2024-04-17T09:09:16Z")

</div>

ありがとうございます！

max-width: none; のままだと画面いっぱいになってしまいましたが、上下セクションの幅1000pxに合わせたらぴったりハマりました！

イメージ通りになりとても助かりました。

ご回答ありがとうございました！