コレクションページのモバイル表示の際に、2列で表示したい

ディスプレイの画面サイズを指定することで、表示される列を指定できると言うことでしょうか。

コード編集画面の「Assets」の中にある「timber.scss.liquid」をクリックして開いていただくと、298行目からグリッドシステムの画面サイズが定義されています。この中の「$small」の値を変更することで、質問者さまが希望する動作にできるかもしれません。

【現状】
$small: 590px;

→顧客の画面サイズが590px以下なら1列、591px以上なら2列で表示

(※私が最初に回答した内容を元に戻している前提です)

【変更例】
$small: 400px;

→顧客の画面サイズが400px以下なら1列、401px以上なら2列で表示
(※私が最初に回答した内容を元に戻している前提です)

ただし、この設定はコレクションページ以外の全てのページで共通の設定です。コレクションページはご希望の表示になったとしても、他のページでの表示がご希望に沿わなくなる可能性もあります。

閲覧する人の見やすさを考慮するのは良いことですが、閲覧者の環境は多種多様です。全ての人をカバーしようとして「あちらを立てればこちらが立たず」に陥ることもありますのでご注意を。

1 Like