質問:

Elementorのアイコンボックスウィジェットで作成したアイコンとテキストをモバイル表示の際に横並びにしたいのですが、方法はありますか?

Elementorのアイコンボックスウィジェットを使用していますが、スマホ表示にすると、タイトル・説明が画像のように改行されてしまいます。

アイコンとテキストを横並びに表示することは可能でしょうか?

回答:

アイコンボックスのこの仕様に以前elementorサポートに問い合わせたことがあります。

どうやらデフォルトではコンテンツが最適に表示されるようになってるため、横一列にならないようになってるというようなことを言ってました。

こちらのcssを追加することで解決できるかと思います。数値はお好みで変えてみてください。

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

/* icon box */

.elementor-widget-icon-box .elementor-icon-box-wrapper{

text-align: left;

display: inline-flex;

}

.elementor-position-left .elementor-icon-box-icon{

margin-right: 20px !important;

}

}

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

関連した質問

コメントを残す

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

Elementorの無料テンプレートサイト
新規追加されました。

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

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

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