お世話になっております。
prestigeテーマを使用しております。
モバイル表示でトップページの特集コレクションを3列で表示させたいです。
どのようにコード編集しましたら3列になりますでしょうか。
また
こちらのサイトのようにカテゴリ(コレクションリスト)を横スクロールで表示させるにはどうすればよいでしょうか？
お分かりになられる方がいらっしゃいましたら、よろしくお願いいたします。
Topic summary
Prestigeテーマを使用しているユーザーが、モバイル表示でトップページの特集コレクションを3列表示にする方法を質問しています。
フルバランスの渡邉氏から回答があり、以下の解決策が提示されました：
- Featured collectionsセクションでLayoutを「Carousel」に設定
- CSSコードを追加（スクリーンショット付き）：
@media screen and (max-width: 640px) {
.ProductList--carousel .Carousel__Cell {
width: 33%;
}
}
このコードにより、スマホ表示時のみ商品を3列表示にできるとのこと。
質問者は追加で、参照サイト（https://nuit.jp/）のようにカテゴリ（コレクションリスト）を横スクロール表示にする方法についても教示を求めています。
状態: 最初の質問には解決策が提示されたが、追加質問は未回答で継続中。
Minorimitaniさま
はじめまして、フルバランスの渡邉です。
ご質問を確認いたしました。
スマホの際に商品の表示数が調節できると良いですよね。
一例ですが、Featured collectionsというセクションでLayoutにCarouselを選択し、
以下のようにcssを追記いただければスマホのときだけ３列にできるかと存じます。
@media screen and (max-width: 640px){
.ProductList–carousel .Carousel__Cell {
width: 33%;
}
}
お試しいただけますと幸いです。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
フルバランス 渡邉