Lightningでできるカラムブロックをスマホでも横並び表示の方法

Web制作ハック

ワードプレスのライトニングテーマって初心者の人にもわかりやすく、かつ使える機能がたくさんあってすごいですよね。今回はLightningテーマのカラムブロックのお話しです。

スポンサーリンク

やりたいこと 6カラム1行をスマホ表示では3カラム2行に

ライトニングの固定ページで、Gutenbergのカラムブロックで、6カラム表示をするとスマホでみたときに1カラムになってしまいますよね。

6カラムに画像を入れて、スマホで1カラムだとスクロールが大変なので、スマホでは3カラム2行表示にしたいなと思っていました。

できれば、このためだけにプラグインを入れることはしたくなかったので、今ある機能でどうにかするか、CSSのカスタマイズを試みました。

解決方法

そして、ライトニングの機能と、CSSコードの追加で解決しました!


①カラムブロックに以下のCSSコードを追加します。

②Lightningの画面表示毎の非表示設定を使いこなすのです。

詳しい内容はあとで画像とともに載せますね。よろしくお願いいたします。