スマホで閲覧すると右に空白が発生

Question

bootstrapでレスポンシブサイトを作成したのですが、
どおーしても右に空白が発生してしまいます。

name=”viewport”でwidhtを指定してみたり
overflow: hidden;をvisible-xsに設定してみたりしたのですが、一向に空白がなくなりません。
お知恵をおかしいただけないでしょうか。

作成サイトURL
http://www43.tok2.com/home/kitagawa625/

Answer 1

bootstrap.cssの
「row」クラスにあたってる

margin-right: -15px;
margin-left: -15px;

が邪魔してそうですね。

Answer 2

アスタリスクで文字列の折り返しを折返す指定と、オーバーフロウではみ出し部分を非表示。

フロートの継承の解除を気をつけてみるとイイかもしれませんね。

Answer 3

これで余白は消えませんか。

#tok2_user_contents {
    overflow: hidden;
}

Comments

[KITAGAWA]

ご回答ありがとうございます。

広告の載っていないサイトで試してみたのですが、やはり余白消えませんでした。

[yuya3110]

自分の環境では消えるんですが、どこに書いていますか？

＞広告の載っていないサイトで試してみた
別のサイトって事でしょうか。
このコードは掲載URLのセレクタを書いたので別のサイトには使えませんよ。
別のサイトでしたら大本の一番大きなdivタグ、所謂Wrapperにoverflow:hiddenを付けてください。

Answer 4

ざっとソースを見たところ、色々拙い部分がありそうでしたので、こちらのサイトでチェックしました。
Another HTML-lint

結果

まずは、正しくマークアップされていないと、いくらCSSをいじっても無意味ですので、まずはこれを解決しましょう。

---

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/normalize.css">

bootstrap.css のあとに normalize.css を読み込んでいたり、やってはいけないことをやっているので、かなり手を加えなきゃいけない感じですね…。

Comments

[KITAGAWA]

まずリセットCSSを読み込まないといけないですもんね。
最低でも点数がマイナスにならないように手を加えてみます。

アドバイスありがとうございます。

[退会済みユーザー]

いいえ、reset.css は使ってはいけません。これを使ってしまうと bootstrapの恩恵を受けられません。

[KITAGAWA]

rest.cssは追加しないように致します。
教えていただいたようにサイトでチェックし
修正して広告が載らないサイトで修正したページを判定してみたところ、なんとか61点迄いけるようになりました。
エラーも19個迄減らせました。