ウェブサイトは起こらないのに、スマホで右スクロールすると、ページ外のとこまで行ってしまう！

Question

polipoli.work
というサイトを運営しているのですが、なぜかスマホでみたとき、右スクロールができるようになってしまい、異次元的なところに行ってしまいます。
右スクロールしないようにするにはどうすれば良いですか？

Answer 1

レスポンシブですか？

そうであれば、どれかの要素がスマホの横幅を突き抜けて外に出てしまっている可能性が高いです。
CSSのスタイルの継承を常に意識し、横幅が飛び出る要素が出ないように集中しましょう。

個別対応のやっつけ仕事を繰り返すと頻発します。
コードの品質を意識しない後輩が何度もやらかしてましたね。
例外や重複の少ない統一されたコードを目指して調整頑張ってください。

---

【追記】

実際に質問文のサイトを見てみました。
確かに350px以下の場合レイアウト崩れが発生するようです。
Android端末の多くはスマホサイトでも400px前後を維持しますが、iPhone5等をはじめとしてスマホは320pxが基準となるので崩れます。

float: left;にmargin-left: 350px;の山で闇が深いですね、これはギブアップですわ。
おそらくmargin-left: 350pxのどれかを消し忘れて、ほぼ目に見えない要素がこっそり鎮座してるんだろうなと思います。

Comments

[ryusei_kurata]

回答ありがとうございます。頑張って探します！

[ryusei_kurata]

miyabiさんのおっしゃる通り、やっつけでやってしまいました。
スタイル継承というものを頑張って意識していきます！

Answer 2

TOPページしか確認していませんが、HTML内の以下の2点が原因になっているみたいですね。

215行目：

<p style="background-color:white;width:400px;～">・・・</p>

370行目：

<h5 style="width:1440px;height:100px;"></h5>

いずれも、スマホの基準である320pxを越える指定がされているので、ここを直せばとりあえずは改善されると思います。

Answer 3

背景画像のようなものが飛び出しているような気がします

Comments

[ryusei_kurata]

レスポンシブ対応がうまくできていないようです。とりあえず、スマホ対応には少なくともしたい方針でいるので、webサイトは捨てています！

Answer 4

抜本的な解決にはなりませんが、とりあえず横にスクロールすることを防ぎたければoverflow-x: hidden;で行うことができます。

body {
    overflow-x: hidden;
}

widthがpx指定のものが残っているのかと思ったのですが、見当たらないのでmetaタグのviewportを下記に変更することで解決しないでしょうか？

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Comments

[ryusei_kurata]

回答ありがとうございます！この対策は行いましたが、直りませんでした！
もう少し試行錯誤してみます！