質問:

ElementorでPCで奇数のカラムが入った二つのセクションが重なった時、モバイルで2列でスペースなしで表示させたい場合

画像のようにセクションを2つ重ねて、カラムを5つずつ配置すると、モバイル表示にした場合、2つずつ横並びにしたら一つあまりが出てしまいます。こちらを解消する方法はありますか?

回答:

こちらの方法で対処できます。

  1. 1つのセクション内に10カラムを全部入れる。
  2. そのセクションに任意のclass名をつける。(CSSサンプルでtofu-wrapになっているところ)
  3. 下記の追加CSSを入れる

.tofu-wrap .elementor-container { flex-wrap: wrap; }

.tofu-wrap .elementor-column.elementor-col-10 { width: 20%; }

@media only screen and (max-width: 767px) {

.tofu-wrap .elementor-column.elementor-col-10 { width: 50%; }

}

 

TOFUラボに入れば更に多くの質問と回答のログが見れます!

関連した質問

コメントを残す

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

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

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

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