Divi、スマホで複数列

Diviの行をスマホでも複数列で表示する方法【便利】

こんにちは、ナオミです。
Diviは何もしなくてもレスポンシブで、スマホでもタブレットでもサイトを綺麗に表示してくれます。
でもスマホではいつも一列で、それを変えることは設定画面からはできません。
この記事ではCSSを使ってどうやってそれを変えるのか説明します。

Diviの行にCSSクラスをセットする

Diviの行にCSSクラスを追加する

まずは行にCSSクラスをセットします。ここは自分の好きな名前にしてください。

DiviのCSSのメディアクエリのコードを上書き

次のコードを追加してください。

@media only screen and (max-width: 980px) {
  .tf-cols .et_pb_column {
    width: 29% !important;
  }  
}

@media only screen and (max-width: 479px) {
  .tf-cols .et_pb_column {
    width: 50% !important;
  }  
}

このコードは、まず最初のブロックはタブレットを示し、次のブロックがスマホのサイズを表します。
29という中途半端な数字になってますが、これはDiviが初期設定で余白を加えるためです。
スマホのところで、width: 50%になってますよね。この50%は行の50%です。
行の幅全体が100%なので、50%ですと二つしか同列に表示されないわけです。

色々とこのコードをいじってみてください。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

Diviの最新情報を知りたいなら、このノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

https://tofulab.app/join/

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通