# トップページに表示するページセクションの幅を変更したい【テーマ：Dawn】

**URL:** <https://community.shopify.com/t/dawn/337797>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [July 8, 2024, 10:21am UTC](https://community.shopify.com/t/dawn/337797 "2024-07-08T10:21:48Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマを使用したECサイトのトップページで、ページセクションの横幅が他のセクション（コレクションリストなど）と比べて狭く表示される問題が報告されました。

**問題の詳細：**
- ページセクション（画像の黒い■部分）だけが他より幅が狭い
- PCでのみ発生し、スマホでは正常に表示される

**解決方法：**
1. 管理画面から「オンラインストア」>「テーマ」>「コードを編集」に移動
2. 「セクション」フォルダ内の`page.liquid`ファイルを選択
3. 横幅を狭く設定している`page-width--narrow`クラスを削除
4. 保存して完了

質問者は解決策を試し、ページの横幅が他のセクションと揃ったことを確認して問題が解決しました。

<div class="post-metadata">

**Author:** ![T\_ym](https://avatars.discourse-cdn.com/v4/letter/t/58956e/32.png) [@T\_ym](https://community.shopify.com/u/T_ym)\
**Post date:** [July 8, 2024, 10:21am UTC](https://community.shopify.com/t/dawn/337797/1 "2024-07-08T10:21:48Z")

</div>

投稿失礼します。

現在添付したような形で、ECサイトのトップページにコレクションリストやページをセクションとして追加しています。

そのうえで、ページセクションだけが他のセクションと比べて横幅が狭く設定されてしまい、他のセクションと幅が合わず見栄えが悪くなっています。

 ![名称未設定 2.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/3/b/7/3b73b3d9d606fa072d46edf589758a4fc89221c3.png)

具体的には、この黒い■部分がページセクションの部分となっており、上のコレクションリストのセクションと横幅が異なっています。

この事象はPCでのみ発生し、スマホで表示した場合には発生しません。

どこのコードを書き換えたらよいのかご教示お願い致します。

---

<div class="post-metadata">

**Author:** ![Anonymous\_5168086324d6fa4637c896de39bb248c](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_5168086324d6fa4637c896de39bb248c/32/28647_2.png) [@Anonymous\_5168086324d6fa4637c896de39bb248c](https://community.shopify.com/u/Anonymous_5168086324d6fa4637c896de39bb248c)\
**Post date:** [July 8, 2024, 11:13pm UTC](https://community.shopify.com/t/dawn/337797/2 "2024-07-08T23:13:51Z")

</div>

以下の手順をお試しください。

1.管理画面にログインし、[オンラインストア] \> [テーマ] に移動します。

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

3.「セクション」フォルダ内のpage.liquidファイルを選択し、コードを以下のように修正します。

修正前：

```markup

```

修正後：

```markup

```

4.最後に「保存」をクリックして完了です。

【解説】「page-width–narrow 」が横幅を狭く設定しているので、それを削除しました。

---

<div class="post-metadata">

**Author:** ![T\_ym](https://avatars.discourse-cdn.com/v4/letter/t/58956e/32.png) [@T\_ym](https://community.shopify.com/u/T_ym)\
**Post date:** [July 9, 2024, 8:38am UTC](https://community.shopify.com/t/dawn/337797/3 "2024-07-09T08:38:52Z")

</div>

ありがとうございます！ページの横幅が他のセクションとそろいました！
