お問い合わせはコチラから

Elementor編集画面のレスポンシブモードでデザインが崩れる原因

サイト運営

Elementorはくせつよなプラグインなので使いたくないのですが、世界的なシェアは圧倒的なので長いものには巻かれないといけない今日この頃です。

Elementorで制作されたサイトの固定ページをElementorで編集する際に、レスポンシブモードでタブレットサイズにすると、エディタ上のデザインが崩れてしまいました。

原因がわかるまで小一時間かかりましたので、メモしておきたいと思います。

原因:必要なCSSのmedia queryの条件にマッチしていない

Dualモニター環境で、Retinaディスプレイと非Retinaのディスプレイで確認したところ、非Retinaでは正常に表示されるが、Retinaではデザインが崩れます。

両者を比べることができたので、たまたま原因に気が付けました。

正常に表示されるときは、media queryのタブレットサイズのCSSが当たっていますが、表示されない時はそのCSSが当たっていませんでした。

画面サイズを1px大きくするとmedia queryが反応して正常に表示されるようになりました。

また、この不具合現象は、Retina Dispalyの時は発生して、非Retinaの時は発生しませんでした。

このようなことから、media queryの画面サイズ判定が上手くいってないことになりますので、ElementorのCSSに問題があるということになります。

Elementorではよく知られた問題らしい?

Elementorのbreakpointの1px Gap問題としてissueが上がっていますが、根本的な解決はなされていないようです。

つまるところ、Retina環境だと小数点が出てしまうのでmedia queryの条件判定がおかしくなるということだと思います。

Responsive display settings have 1px gap in breakpoints · Issue #5221 · elementor/elementor
I have searched for similar issues in both open and closed tickets and cannot find a duplicate. The issue still exists against the latest stable version of Elem...

解決策

今回の現象は、Retina Displayと非Retinaの違いでも発生しますが、ブラウザのZoomの倍率でも発生します。

ブラウザのZoomがデフォルトになっているか確認します。

具体的には、Zoomを100%に戻しましょう。

Chromeの場合は、Ctrl++/-でZoom up / downできます。

まとめ

Elementorはユーザーが多いので、いろんな条件をテストする必要がありますが、基本的にはデフォルトで問題なければ、それで使えと言われておしまいな気がします。

今後も直すつもりはないでしょう。

Elementorのレスポンシブモードの表示が崩れたら、ブラウザZoomを疑えというお話でした。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました