- カテゴリ: Elementorの質問
質問:
ElementorでPCで奇数のカラムが入った二つのセクションが重なった時、モバイルで2列でスペースなしで表示させたい場合
画像のようにセクションを2つ重ねて、カラムを5つずつ配置すると、モバイル表示にした場合、2つずつ横並びにしたら一つあまりが出てしまいます。こちらを解消する方法はありますか?
回答:
こちらの方法で対処できます。
- 1つのセクション内に10カラムを全部入れる。
- そのセクションに任意のclass名をつける。(CSSサンプルでtofu-wrapになっているところ)
- 下記の追加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ラボに入れば更に多くの質問と回答のログが見れます!
関連した質問
Elementorでテキストを左右で分けたい。メニューは左、値段は右で揃えたい。どうするの?
2023年10月7日
コメントはまだありません
内部セクションが無くなった!コンテナで代用できるの?
2023年9月30日
コメントはまだありません
Elementorで1つのアーカイブ内に複数のカスタム投稿を表示したい
2023年8月3日
コメントはまだありません
WordPressのログイン画面の編集はできるのでしょうか?
2023年8月3日
コメントはまだありません
Elementorのレシポンシブ対応時のモバイル画像の大きさが上手く設定できません
2023年8月3日
コメントはまだありません
Elementorのコンテナの間に自動で隙間が出来てしまうので、それを埋める方法が知りたい
2023年8月3日
コメントはまだありません