FROM CACHE - jp_header

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

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

lisa_22
訪問者
2 0 0

初めまして。

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

 

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

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

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

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

 

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

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

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

 

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

  • CSS
2件の返信2

株式会社フルバランス
Shopify Partner
1537 549 697
Lisa_22様

ご質問確認しました。

コードを拝見していないため、詳細は回答できかねますが、
おすすめ商品のカードを囲っているタグ、class名に下記のような
CSSを記載することでスマホ時は2列に変更することが可能です。
 

 

@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名やタグ名は実際のコードに合わせて変更してください。

ご参考になれば幸いです。
株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
lisa_22
訪問者
2 0 0

ありがとうございます!

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

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

 

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

 

スクリーンショット 2024-02-16 19.24.05.png