url欄がスマホ表示にすると画面の右横へはみでてしまいます word-wrap: break-word; は指定しています。

Question

#補足

ちなみにCSS該当部分.youtube_url_css {を全て削除すると以下のように右に入力欄が大きくはみ出してしまいます。

お世話になります。お手数おかけしますがよろしくお願いします。

#URL欄がスマホ表示した時に画面からはみでてしまいます。
下の図の薄い水色の部分です。右側が画面をはみ出てしまっています。

#ためしたこと

word-wrap: break-word; を指定したのですが、スマホ表示の際にどうしても画面からはみ出てしまいます。

#ソース

.youtube_url_css {
    width: 800px;
    height: 32px;
    font-size: 18px;
    -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
    -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 3px 8px -6px rgba(0,0,0,0.5);


    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    word-wrap: break-word;
}

htmlは以下です。

 <label>{{form.url|add_class:"youtube_url_css"}}</label>

ちょっとわかりずらいですがdjangoでcss呼んでいるだけです。

宜しくお願いいたします。

Comments

[yoshinavi]

提示のCSSは、問題箇所のCSSですか？
デベロッパーツール等で、適用CSSは、確認されましたか？

Answer 1

width: 800px;が原因では。

Comments

[退会済みユーザー]

width: 800px;を削除しても一向に同じ症状です

[kei344]

では別の箇所で指定しているのでしょう。

[退会済みユーザー]

そうですね。ありがとうございました

[kei344]

HTML/CSSは単一箇所の問題だけでなく、他の箇所に書かれている可能性が高いのですが･･･。低評価をされるのはかまいませんが、どの部分に問題があるかはコメントくださいね。当回答および次回以降の回答の改善につながる可能性もあるので、よろしくおねがいします。

[退会済みユーザー]

そうですね。

[yoshinavi]

質問者さんへ
「kei344」さんの指摘部分についてですが、スマホ（縦）の場合、大概はwidthが800pxだと支障をきたすと思います。

デベロッパーツール等で、他のCSSが適用されていないかを確認した方が良いかと思います。

Answer 2

その他効いているCSSを全て外して全てソースを１から作りこむとはみだしはなくなりました。

Comments

[yoshinavi]

結局、原因は何だったのですか？