スマホ表示が右側に余白ができる

わいひら様

迅速な回答、ありがとうございます。
早速、simplicityをiphoneで見たところ、モバイル表示は問題なく余白も出ませんでした。
andoridは確認できていません。

解像度はiphone5sですので、326ppiです。

プラグインを停止し様子を見る、テーマを再アップロード、他テーマを有効化、などの不具合に対する対応をすべて行いましたが原因は不明です。

当該サイトのページurlを載せさせていただきます。
http://setuyaku-web.com

ご多忙のところ恐縮ですが、よろしくお願い致します。

Firefoxのスタイルエディタでcssが読めないので、cssにエラーがあるんじゃ無いでしょうか？
子テーマstyle.cssやその他手を入れたcss、子テーマmobile.cssなどチェックしてみて下さい。

Hidekichi様

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

ご指摘いただいたスタイルシートなどをチェックし、念のため修正していたすべてのスタイルシートを一度消去してみましたが改善できません。

１点だけ心当たりがあるのですが、初歩的な質問だったら申し訳ありません。

いくつかの投稿記事の中に、「インデントを減らす」を使っているのですが、それが関係があるのでしょうか？

でももし「インデントを減らす」ことが右側の余白を作っているのであれば、トップページには余白は生まれないと思うのですが・・・

個人的に色々考えたのですが、それくらいしか心当たりがありません。
大変もうしわけありません。

僕が #34567 で思ったのは、Firefoxのスタイルエディタの件ももちろんなんですが、完全レスポンシブの機能を利用されてますよね？

そこでタブレットのサイズには、表示がそのようになるのですがスマホサイズだとタブレットのまま変わらないんです。

詳しく言うと、#body-in等のサイズは、PC時:1070px、タブレット時:740px、スマホ時は100%となるはずかと思うんです。しかしスマホサイズにブラウザが変わっても100%にはならず740pxのままになっているということは、そこでメディアクエリが効いてないと思われるわけです。

これは完全レスポンシブがオンなら、responsive.cssあたりに書いてあるメディアクエリが効くはずなのですが・・・。

javascriptにもエラーはありませんし、特別javascriptやcssを操作するようなプラグインも無さそうですし、ネットワーク状況でも全部200OKで返ってきてるので、cssぐらいしか今の所思い当たるフシはないんですけども。

これとはまた別件でわいひらさん向けの話ですが、完全レスポンシブ・オンの時、viewportがサイズ指定してあるみたいなので(width=1280px)、ここらは、content=”width=device-width”に、した方が良いかも知れませんね。
ただ「タブレットではPCと同じ表示にする」の設定が効いていてサイズが1280pxと固定されているのかも知れないのでそこらは仕様かも知れませんけれども。

Hidekichi様

いつも大変ご丁寧な回答を頂きありがとうございます。とても感謝しています。

色々、原因を探してきたところ、サイドバーのウィジェットとして置いていたfacebookのlikeboxの横幅がテンプレートよりも大きく設定していたためにモバイル表示では右側に余白が出来ていたようです。

facebookのlikeboxの横幅を縮小したことで症状は改善しました。

こうやって見てみると、大変初歩的な内容で改善したことをとても恥ずかしく思います。
わいひら様、Hidekichi様には大変ご迷惑をおかけしました。

この度は本当にありがとうございました、。

はみ出ているのは知ってましたし、余白はそうかもしれないんですが、僕が指摘している部分とfacebookのサイズは何も関係ないので(むしろ余白よりも問題としては深い可能性も)、スマホで見て問題ないなら良いですが、少なからずSimplicityのデフォルトの動作の一部が機能していないのは覚えておいて下さい。