※このページにはアフィリエイトリンクが含まれています。
wordpressテーマのSimplicityでスマホで表示した時に右側に余白が出来てしまう時の対処方
タイトル通りなのですがこの問題メチャハマりましたｗｗｗ
最初気づかなかったのですが
新しくエックスドメインでサイトを作った時に個別記事を表示したら
んんんんん
なんか右側に余白が出来てるではないか！？
同じSimplicityのスタイルシートを使ってエックサーバーでは余白が出来ない！？
ここで思った事はエックスドメインだけが何らかのせいで余白が出来るのかなとも思ってみたものの
Simplicityでスキンを使って表示してみると余白が出来てないｗｗｗ
あーだこうーだといじくってる内にエックスサーバーでも余白が出来てしまう。
この時に投稿した記事に何らかの原因がある物だっと思って内心ヨシヨシもしや解決策が分かるかもと喜んでいた。
でも違ったｗｗｗ
投稿した記事をテキストでテストだけと修正して表示してみてもやはり余白が出来ている！？
ここまでで思った事は
サーバーは関係ない
スキンを使うと余白が出来ないけど子テーマを使うと余白が出来る
iphone6でも７でも同じ
もう頭もパンパン状態の上お手上げモードで2日経ちましたｗｗｗ
少しぐらいもういいやと諦めはするものの頭から離れず
気にすればするほど気になるｗｗｗ
そんな時検索してみたらなんと解決方法があるではないか！
早速試してみたら余白が出来なくなった
万歳
でもなんで余白が出来るかの原因は分かりません
早速そのコードをメモしておきます
#container {
overflow: hidden;
}
参考にしたサイト様です
追記：3月20日
参考までにどうぞ
出来る時の原因がハッキリわかりませんが例として書くと
今日たまたま
functions.php
//コンテンツの幅の指定
if ( ! isset( $content_width ) ) $content_width = 680;
widthを変えたらおかしくなり
元に戻しても余白が直らなくなった
それで上のcssを
スタイルシートに入れる事で直った。
（モバイルcssには入れなかったけど治った）
※コンテンツの幅を変えたらwidthも変えないと
スマホで見た時にぐらつきがでるけど
widthの大きさを合わせる事でぐらつきが無くなった！
![1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］ [ Mana ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/8469/9784815618469_1_7.jpg?_ex=128x128)
![ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 [ Mana ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/6145/9784815606145_1_4.jpg?_ex=128x128)
![HTML＆CSSとWebデザインが1冊できちんと身につく本［増補改訂版］ [ 服部雄樹 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/5103/9784297125103_1_4.jpg?_ex=128x128)
![これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 [ Capybara Design 竹内 直人 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0114/9784798170114_1_20.jpg?_ex=128x128)
![今すぐ使えるかんたんEx HTML&CSS 逆引き事典 [ 大藤幹 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/2516/9784297112516.jpg?_ex=128x128)
![HTML & CSSとWebデザイン入門［第2版］＆実践講座 2冊セット [ Mana ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/6022/2100013896022.jpg?_ex=128x128)
![HTML5＆CSS3デザインレシピ集 [ 狩野祐東 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/7808/9784774187808.jpg?_ex=128x128)
コメント
こんばんは。私もiphone7で見たところ余白が生まれていて、こちらのサイトを参考にmobile.cssにコードを入れたのですが、余白が消えません。。他に手だてはありますでしょうか。
mobile.cssじゃなくstyle.cssに書けば良いかと思いますよ。
子テーマでもstyle.cssに書けば良いと思います。