Liquid、JavaScriptなどに関する質問
皆様
初めまして。
現在、Envyというテーマを使用して、ページ作成をしております。
そこで、カテゴリーページを使用しようと思ったのですが
通常の設定ですと、モバイルは1列になってしまっているので
2列にする方法がございましたらご教示いただけると幸いです。
よろしくお願い申し上げます。
解決済! ベストソリューションを見る。
成功
多少興味がありましたのでEnvyを使っているストアのソースを見て試したところ、おそらく以下の記述をCSSに追加いただければ動作はするかなと思います。
@media (max-width:767.98px){
.homepage-sections-wrapper .collection-grid .col-md{
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
}
※多少余分な記述に見える部分はありますが、メディアクエリで768px以上の際に適用されるCSSに沿って記述しています。
※より良い方法があるかもしれませんので、最前の方法ではない点をご了承ください。
なお、上記は別ストアを参考に開発者ツールで確認しただけなのと、他の要素への影響は確認していません(一応限定的に適用されるように意図してはいますが)。
そのためこの記述で解決できないか問題が起きる場合は、以下の方法を検討ください。
(※1)日本フォーラムよりも回答者の数が遥かに多く、テーマの中身を把握している方がいる可能性も高いため
以上ですが、対象が有料テーマの場合は無料テーマに比べて回答できる方の数が減ると思いますし、上記の2以降の方法をまず試されることをお勧めします。
投稿者です。
こちらを編集するとモバイルのみ2列にできたりしませんでしょうか・・・
助けてください。お願い申し上げます。
成功
多少興味がありましたのでEnvyを使っているストアのソースを見て試したところ、おそらく以下の記述をCSSに追加いただければ動作はするかなと思います。
@media (max-width:767.98px){
.homepage-sections-wrapper .collection-grid .col-md{
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
}
※多少余分な記述に見える部分はありますが、メディアクエリで768px以上の際に適用されるCSSに沿って記述しています。
※より良い方法があるかもしれませんので、最前の方法ではない点をご了承ください。
なお、上記は別ストアを参考に開発者ツールで確認しただけなのと、他の要素への影響は確認していません(一応限定的に適用されるように意図してはいますが)。
そのためこの記述で解決できないか問題が起きる場合は、以下の方法を検討ください。
(※1)日本フォーラムよりも回答者の数が遥かに多く、テーマの中身を把握している方がいる可能性も高いため
以上ですが、対象が有料テーマの場合は無料テーマに比べて回答できる方の数が減ると思いますし、上記の2以降の方法をまず試されることをお勧めします。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024