テーマEnvyのCollectionlistのモバイル表示を1列から2列への変更について

uchinoko
新規メンバー
2 0 0

皆様
初めまして。

現在、Envyというテーマを使用して、ページ作成をしております。
そこで、カテゴリーページを使用しようと思ったのですが
通常の設定ですと、モバイルは1列になってしまっているので
2列にする方法がございましたらご教示いただけると幸いです。

よろしくお願い申し上げます。

スクリーンショット 2021-10-20 11.42.18.png

 

2件の返信2
uchinoko
新規メンバー
2 0 0

投稿者です。

こちらを編集するとモバイルのみ2列にできたりしませんでしょうか・・・

助けてください。お願い申し上げます。

スクリーンショット 2021-10-25 0.59.38.png

Jizo_Inagaki
航海者
480 178 476

多少興味がありましたので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. カスタマイズで設定が変更できるかどうか確認する
  3. テーマのドキュメント内を探す(https://support.weareeight.com/hc/en-us/categories/360003661238-Envy )
  4. テーマ制作作者に質問する
  5. エキスパートやパートナーに依頼する
  6. 英語フォーラムで質問する(※1)

(※1)日本フォーラムよりも回答者の数が遥かに多く、テーマの中身を把握している方がいる可能性も高いため

 

以上ですが、対象が有料テーマの場合は無料テーマに比べて回答できる方の数が減ると思いますし、上記の2以降の方法をまず試されることをお勧めします。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。