DAWNを使ってトップページの作成をしているのですが、マルチカラムを使って画像を並べると、スマホで見ると画像のように余白の部分がほとんどなく隙間がなくなってしまっているため、こちらの幅を広くしたいです。
（PC版は今の画像の幅間で問題ないので、SP版のみ変更希望です。）
cssやコードでどうやればよいか、具体的にご教授いただきたいです。
よろしくお願いいたします！
Topic summary
-
問題: Shopify「Dawn」テーマのマルチカラムで、スマホ表示時に画像同士の余白がほぼ無くなる。PCは問題なしで、SPのみ余白を広げたい。
-
提案された解決策: テーマのカスタマイズ画面＞「マルチカラム」＞「カスタムCSS」に、スマホ向け（max-width: 749px）のメディアクエリを追加。
- .grid の column-gap／row-gap を任意の値（例: 10px）に設定。
- .grid–2-col-tablet-down .grid__item の幅を、gapを考慮した calc() で調整して2列レイアウトを維持。
- 余白値（例の10px）は目的に合わせて変更可能。
-
補足: スクリーンショットで現象が共有され、コードはセクション単位の「カスタムCSS」に追記する形。
-
結果: 提案のCSSで問題は解決。依頼者が動作確認し完了報告。スレッドは実質クローズ。
Kabu_mcom様
ご質問を確認いたしました。
Dawnのマルチカラムでしたら、以下のコードをカスタマイズ画面の「マルチカラム」>「カスタムcss」に入力していただければ良いかと存じます。
@media screen and (max-width: 749px) {
.grid--2-col-tablet-down .grid__item {
width: calc(50% - 10px / 2);
}
.grid {
column-gap: 10px;
row-gap:10px;
}
}
「10px」の部分を任意の余白幅にご変更ください。
ご参考までに。