現在dawnのテーマでサイトを構築しており、ページに画像を入れた時の左右の余白を削りたいと考えています。
テーマ設定→レイアウト→ページ幅はすでに修正しましたがサイトで変化はありませんでした。
ページのliquidの設定はwidth: 100%に設定しており、その場合親要素の設定が必要かと思いますがどこを修正すればよいかがわからず困っております。
横幅の親要素がどこから修正できるかどなたかご教授いただけないでしょうか？
お手数おかけしますが、どうかよろしくお願いいたします。
Topic 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が提示済み。
補足: 添付画像が期待レイアウト（余白なし）の基準として重要。
1 Like
ご質問拝見しました。
こちら考えられるcssは以下があります。
paddingやmargin が含まれていなければmax-widthが設定されていないでしょうか？
詳細に関してはプレビューリンクをいただければクラス名まで指定した具体のコードについてお答えできるかと思います！
ご参考までにしていただければと思います。
なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。
株式会社フルバランス
1 Like
ご確認ありがとうございます！
paddingやmarginは基本0で設定しており、max-widthは全て100%で設定をしております。
メールにてプレビューリンクをお送りさせていただきますので、どうかご確認よろしくお願いいたします。
1 Like
メッセージありがとうございます！
確認させていただきました！
page-widthという全体のclassにpaddingがついていましたので、以下css適用で余白は削除できます。
そうするとしたのセクションの写真一枚のwidthが33%×3で1%分の余白が出てしまうのでそこも限りなく100％にちかくすれば余白は削除できます。
以下 cssを参考にしてみてください！
.page-width{
padding:0px;
}
.container-3flex p{
width:33.33333333333%
}
ご確認よろしくお願いいたします！
1 Like
