テーマ：Dawn コレクションリストのモバイル表記列追加

[FEI]

Dawn 15.1.0を使用しております。

モバイルのコレクションリストでは横に2列までしか増やす事が出来ないので、

こちらを3列、4列と表示できるようにするにはどのようなコーディングが必要でしょうか？

過去のバージョンなどでは回答があったのですが、

現在のバージョンで答えが見つからない為。

↑ここを横3、4列に変更したい。

よろしくお願いします。

[Qcoltd · Accepted solution]

@FEI様

コレクションリストを3列、4列表示にする場合ですが、

コレクションリストのカスタムCSS欄にcssを追加することで対応が可能かと思われます。

手元にDawn15.1.0がなかったため、Dawn15.2.0を元に回答させていただきます。

前提条件

モバイルのレイアウトを2列表示にする。

3列の場合

カスタムCSSに下記コードを追加

@media screen and (max-width: 749px) {
  .grid--2-col-tablet-down .grid__item {
    width: calc(33% - var(--grid-mobile-horizontal-spacing) / 2);
  }
  .grid__item {
    max-width: calc(33.3%);
  }
}

4列の場合

カスタムCSSに下記コードを追加

@media screen and (max-width: 749px) {
  .grid--2-col-tablet-down .grid__item {
    width: calc(25% - var(--grid-mobile-horizontal-spacing));
  }
  .grid__item {
    max-width: calc(25%);
  }
}

ご参考まで。

（キュー小坂）

[FEI]

キュー　小坂様

ご丁寧にありがとうございます。

無事解決致しましたので、ベストソリューションとさせて頂きます。

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