初めまして。
現在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名やタグ名は実際のコードに合わせて変更してください。
ご参考になれば幸いです。
