# ページの横幅にある余白を削りたい

**URL:** <https://community.shopify.com/t/topic/364266>\
**Category:** 技術的なQ＆A\
**Created:** [October 7, 2024, 6:26am UTC](https://community.shopify.com/t/topic/364266 "2024-10-07T06:26:03Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

主題: Shopify「Dawn」テーマで、ページに挿入した画像の左右余白をなくしたい。テーマ設定のページ幅変更やセクションのwidth:100%では効果がなく、親要素の制約箇所を特定したい。

対応: プレビュー確認の結果、全体クラス.page-widthにpaddingがあることを特定。.page-widthのpaddingを0にするCSSを提案。あわせて3カラム画像は幅33.3333%に調整し、残余1%分の隙間を解消する方針が提示。

最新: 提案CSS適用で2点の問題が発生。1) SP（スマートフォン）で1枚表示のレスポンシブが崩れた。2) 目標のフルブリード（端まで）幅に到達しない。

現状: 依頼者がコードをメールで共有し、再確認とベストソリューションの提示を依頼。解決には至っておらず継続中。

成果/決定: 余白の主因が.page-widthのpaddingであることを特定し、具体CSSが提示済み。

補足: 添付画像が期待レイアウト（余白なし）の基準として重要。

<div class="post-metadata">

**Author:** ![556](https://avatars.discourse-cdn.com/v4/letter/5/c89c15/32.png) [@556](https://community.shopify.com/u/556)\
**Post date:** [October 7, 2024, 6:26am UTC](https://community.shopify.com/t/topic/364266/1 "2024-10-07T06:26:03Z")

</div>

現在dawnのテーマでサイトを構築しており、ページに画像を入れた時の左右の余白を削りたいと考えています。

テーマ設定→レイアウト→ページ幅はすでに修正しましたがサイトで変化はありませんでした。

ページのliquidの設定はwidth: 100%に設定しており、その場合親要素の設定が必要かと思いますがどこを修正すればよいかがわからず困っております。

横幅の親要素がどこから修正できるかどなたかご教授いただけないでしょうか？

お手数おかけしますが、どうかよろしくお願いいたします。

 ![スクリーンショット 2024-10-07 15.19.08.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/a/8a2fe1ae4cfc1e10b699fbf6ddb7f9b9c77eb90e.jpeg)

---

<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:** [October 7, 2024, 8:11am UTC](https://community.shopify.com/t/topic/364266/2 "2024-10-07T08:11:27Z")

</div>

ご質問拝見しました。

こちら考えられるcssは以下があります。

paddingやmargin が含まれていなければmax-widthが設定されていないでしょうか？

詳細に関してはプレビューリンクをいただければクラス名まで指定した具体のコードについてお答えできるかと思います！

ご参考までにしていただければと思います。

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

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![556](https://avatars.discourse-cdn.com/v4/letter/5/c89c15/32.png) [@556](https://community.shopify.com/u/556)\
**Post date:** [October 7, 2024, 8:17am UTC](https://community.shopify.com/t/topic/364266/3 "2024-10-07T08:17:03Z")

</div>

ご確認ありがとうございます！  
paddingやmarginは基本0で設定しており、max-widthは全て100%で設定をしております。  
メールにてプレビューリンクをお送りさせていただきますので、どうかご確認よろしくお願いいたします。

---

<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:** [October 8, 2024, 9:23am UTC](https://community.shopify.com/t/topic/364266/4 "2024-10-08T09:23:43Z")

</div>

メッセージありがとうございます！

確認させていただきました！

page-widthという全体のclassにpaddingがついていましたので、以下css適用で余白は削除できます。

そうするとしたのセクションの写真一枚のwidthが33%×3で1%分の余白が出てしまうのでそこも限りなく100％にちかくすれば余白は削除できます。

以下 cssを参考にしてみてください！

```auto
.page-width{
padding:0px;
}

.container-3flex p{
width:33.33333333333%
}

```

ご確認よろしくお願いいたします！

---

<div class="post-metadata">

**Author:** ![556](https://avatars.discourse-cdn.com/v4/letter/5/c89c15/32.png) [@556](https://community.shopify.com/u/556)\
**Post date:** [October 9, 2024, 5:42am UTC](https://community.shopify.com/t/topic/364266/5 "2024-10-09T05:42:50Z")

</div>

お世話になっております。  
ご確認ありがとうございます。  
確認させていただきました！  
大変申し訳ないのですが、２つ問題が生じました。

①SPでは画像が1枚で表示されるようにしてたのですが、いただいたコードを使用するとレスポンシブにならなくなってしましました。  
②余白がイメージ画像ほどまで広げたいのですが、そこまで広げることができませんでした。

何度も大変申し訳ございませんが、是非ベストソリューションを押させていただきたいので再度ご確認いただけますでしょうか？  
メールにてこちらのコードを念のためお送りさせていただきますのでどうかお手隙の際にご確認をお願いいたします。

 ![スクリーンショット 2024-10-08 19.09.51.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/7/87a95f69c016afb0a2bcc3f9cbc97e894fdf4ddb.jpeg)