商品表示をスマホの時に2列にしたい

[lisa_22]

初めまして。

現在Dawnのテーマを使用しています。

メタフィールドを使用して「オススメ商品」を掲載できるようにしました。

デバイスによって表示数を変えたいです。

現在PCでもスマホでも横4列のままでして、

スマホ時は横2列に表示を自動変更したいです。

liquidやcssがあまり詳しくないので

変更方法が分からず困っています。

どなたか修正方法を教えていただきたいです。

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

[株式会社フルバランス]

Lisa_22様

ご質問確認しました。

コードを拝見していないため、詳細は回答できかねますが、

おすすめ商品のカードを囲っているタグ、class名に下記のような

CSSを記載することでスマホ時は２列に変更することが可能です。

@media screen and (max-width: 768px){ /* 768px以下の画面幅の時 */
  .card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* カードの列数 */
    gap: 20px; /* カード間の間隔 */
  }
  .card-container .card{
    width: auto;
  }
}

class名やタグ名は実際のコードに合わせて変更してください。

ご参考になれば幸いです。

[lisa_22]

ありがとうございます！

おすすめアイテムのcssに追加したのですが、スマホ時に2列になりません…；；

下記のようにスマホ表示でも横4列になってしまいます、、

そのままコピーだとダメだったのでしょうか。