- カテゴリ: 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で1つのアーカイブ内に複数のカスタム投稿を表示したい
2023年8月3日
コメントはまだありません
WordPressのログイン画面の編集はできるのでしょうか?
2023年8月3日
コメントはまだありません
Elementorのレシポンシブ対応時のモバイル画像の大きさが上手く設定できません
2023年8月3日
コメントはまだありません
Elementorのコンテナの間に自動で隙間が出来てしまうので、それを埋める方法が知りたい
2023年8月3日
コメントはまだありません
Elementorでサイト全体に適用したいCSSはどこに記述するのが良いでしょうか?
2023年8月3日
コメントはまだありません
Elementorの画像カルーセルの各画像それぞれにリンクを付けたい
2023年8月3日
コメントはまだありません