マルチカラム

日本語 ディスカッション 技術的なQ＆A
,

AI-generated 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で問題は解決。依頼者が動作確認し完了報告。スレッドは実質クローズ。

1

DAWNを使ってトップページの作成をしているのですが、マルチカラムを使って画像を並べると、スマホで見ると画像のように余白の部分がほとんどなく隙間がなくなってしまっているため、こちらの幅を広くしたいです。

（PC版は今の画像の幅間で問題ないので、SP版のみ変更希望です。）

スクリーンショット 2023-07-12 115301.png
スクリーンショット 2023-07-12 115301.png729×417 28 KB

cssやコードでどうやればよいか、具体的にご教授いただきたいです。

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

2

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;
  }
}

スクリーンショット 0005-07-12 18.49.41.png
スクリーンショット 0005-07-12 18.49.41.png2010×1568 354 KB

「10px」の部分を任意の余白幅にご変更ください。

ご参考までに。

3

株式会社フルバランス様

ご回答いただき、ありがとうございます！

教えていただいた方法にて無事解決できました。

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

プレビュー