[WordPress]スマホ画面で余白が出てしまう時、このCSSさえ入れれば解決[レスポンシブ崩れ]

ワードプレスでレスポンシブ対応したのに、実際のスマホで見ると、ページ自体はスマホ画面幅で作られているが、右側に白い部分がたくさん残っているように表示される理由は？

まずは原因調査ですが、早速結論を述べておきます

とにかく最後に記載のCSSをページに追加すれば治ります

原因

1. コンテンツの幅が画面幅を超えている 特定の要素や画像、テーブルなどが、画面幅を超えるサイズで設定されている可能性があります。これにより、ページ全体の幅がスマホ画面に収まらず、白い余白が生じます。
2. 固定幅のCSSが設定されている CSSで要素にwidth: 100%が設定されている場合でも、要素内に横幅が大きすぎるコンテンツ（画像やテキスト）が含まれていると、親要素が画面幅を超えて表示されてしまうことがあります。また、固定のピクセル指定（例: width: 500px）が残っている場合も同様です。
3. マージンやパディングが原因 特定の要素にmarginやpaddingが大きく設定されていると、その要素が画面幅を超えてはみ出している可能性があります。
4. 横スクロールの発生 ページ全体にoverflow-x: hidden;が設定されていないと、横スクロールが発生し、画面外にコンテンツが広がっている場合があります。

これさえ入れればOKなCSS

スマホでの表示時に白い余白が残る問題を解決するために、追加すべきCSSを1つにまとめました。カスタムCSSエリアに追加してください。

1. 横幅を調整して余白をなくすCSS

スマホやタブレットでの表示で横に余白が残ってしまう場合に、以下のCSSを追加することで改善できます。

2. 特定の要素に対する調整

もし、特定の要素（例えばタイトルやテキストボックス）が画面からはみ出している場合は、その要素に対して直接スタイルを調整できます。

3. 画像やコンテンツのレイアウト改善

画像やコンテンツが横幅を超えないようにするため、以下のようなCSSを追加して、要素を適切に収めます。

/* 画像が画面幅を超えないように調整 */
img {
max-width: 100%;
height: auto;
}

/* 画像が画面幅を超えないように調整 */
img {
max-width: 100%;
height: auto;
}

/* カラムやボックスの横幅調整 */
.elementor-column, .elementor-widget {
max-width: 100%;
padding: 0 10px;
}

4. 余計なスペースやはみ出しを防ぐための調整

レイアウトに不具合が生じる場合は、特定の要素のpaddingやmarginを見直す必要があります。

これらのCSSを追加することで、レスポンシブ対応を強化し、白い余白やレイアウト崩れを修正することができます。