Elementorのスマホサイト 左右に動いてしまう原因

Elementorのスマホサイト を見ると、左右に動いてしまう事があると思います。多くの原因は、表示エリア外に目に見えるテキストや目に見えない空白（パディングやマージン）がはみ出てしまう点にあります。

目に見える場合はその部分をはみ出ない様にしてあげれば良いのですが、やっかいなのが、目に見えない場合です。パディングやマージンなどによる空白や、外部コンテンツの埋め込みによって生じるはみ出しです。

対処方法その１「その部分を修正する」

見つけられれば、まずはその部分を修正してあげれば良いだけです。特にリンクのURLや、外部コンテンツ（YouTubeの動画や、SNSの引用が原因の場合が多いです。リンクのURLであれば、テキストにリンクを貼る、もしくは良いところで改行してあげるなどでクリア出来ます。外部コンテンツの場合は、埋め込み時のサイズしていなど可能ですが、様々なサービスがある為、各サイトでご確認下さい。

対処方法その２「強制伐採」

色々なページで多発する場合、Elementorのテンプレート作成時点で何かしらがはみ出ているので、作り直しが一番ですが・・・ブログや投稿、ページ数が多いサイトで発生など、今更ムリ！という場合もあるかと思います。その場合、下記コードを書き加えてあげるだけで、強制的に見えなくする事が出来ます。

（注意）以下の方法の実施については、各自自己責任でお願い致します。

上のサンプル画像は、青枠が通常時スマホで表示されるエリア、赤枠がはみ出たエリアです。

まずが、簡単にCSSを追加出来る箇所を探します。多くのテーマにはカスタマイズの中に「追加CSS」があるかと思います。※これはお使いのテーマなどによって変わります。上記はElementorオリジナルテーマの「Hello」を使っています。もし、追加CSSが無い場合は、上記画像の右下にある「テーマエディタ」から、スタイルシートを探します。

カスタムの中に、「追加CSS」というのがあればラッキーです！ここを開きます。

そして、下記コードをコピペで貼り付ければ・・・

html,body{
width:100%;
overflow-x:hidden;
}


表示エリア外のテキストは強制的に見れなくなり、左右に画面が動きません。

【ご質問があれば、質問センターをご利用下さい】


【Elementor Proの購入は本家サイトへ】