スマホ表示で右側に余白ができてしまいます

Simplicityの特徴 フォーラム Simplicityについての質問 スマホ表示で右側に余白ができてしまいます

このトピックには5件の返信が含まれ、2人の参加者がいます。1 ヶ月前 にーちぇ さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #59353 返信

    にーちぇ

    初めまして、貴テンプレートを使用させて頂いております、にーちぇと申します。

    完全レスポンシブを設定しているのですが、スマホでの表示時に
    右側にかなり大きな余白が全体的に生じている状況です。
    (iphone6sを使用)
    ※右側に余白があるのみで、右にスワイプすると出てきます。文字サイズや画像自体は
     スマホ表示されています。

    また、試しにiphoneの「デスクトップ用サイトを表示」をしてみると、なぜか
    余白も消え、きれいな画面表示になりました。

    Google検索ででてきた、スタイルシートに以下を追記等を試しても、余白は消えませんでした。
    #wrapper {
    width:100%;
    overflow:hidden;
    }

    解決方法はございますでしょうか。
    初心者なので、そもそも設定等が間違っているかもしれません・・・

    お忙しいところ大変恐縮ですが、ご教示頂けますと幸いです。
    よろしくお願いいたします。

    HP:https://niiche-retire.com/
    Simplicity2
    Wordpress 4.9.4

  • #59354 返信

    かうたっく

    こんにちは

    こちらでstyleなど検証する場合、Autoptimizeとやらのプラグインが邪魔します。そのプラグインを切ってください。

    ・※スマホに大きな広告を入れている場合スマホの横幅によっては見出します。
    ※※300pxのアドセンスコードをウィジェットにいれてれば、320pxの横幅のスマホでもはみ出さない

    ついでにこちらもご確認ください。

    解決方法はございますでしょうか。
    初心者なので、そもそも設定等が間違っているかもしれません・・・

    ・何かのプラグインが出力HTMLにはみ出さないスタイルが入っていないと『はみ出す場合がある』ので、出力しているプラグインを停止すれば、はみ出す原因が判明する事も多々あるかと思われます。

    http://wp-simplicity.com/suport/topic/first-time/

    上記にあるように、プラグインを停止してどれが原因かを特定のも手だったりします。※さらにこちらもご確認願います。

    原因が分かって解決しない場合
    分かった範囲(どのプラグインが邪魔していた)など書いて頂けたら、また見せて頂けたらと思います。

    あとプラグインが原因でない場合として
    WordPressでよくはみ出す原因になる項目などあります。同じくsimplicityも同様、設置方法によって色々発生します。

    https://bibabosi-rizumu.com/simplicity-img-iframe-table-width/

    検証できない・非常にしにくい状態ですので、これらをご確認後またご連絡くださいね。

  • #59355 返信

    にーちぇ

    かうたっく様

    ご連絡ありがとうございます。

    早速、プラグインはオフにさせて頂きました。(いろいろプラグインのオフを試しましたが、どれも効果はありませんでした・・)

    また、スマホ版のサイトをよく確認したのですが、フッターのみ右端が切れて
    おり100%表示されていませんでした。

    右端に余白がたくさんできてしまうのは、これが原因でしょうか。

    原因がフッターの場合、どのように解決すればよいのでしょうか。

    何卒、よろしくお願いいたします。

  • #59359 返信
    わいひら
    わいひら
    キーマスター

    右側に余白ができるのは、このトップページでしょうか?
    https://niiche-retire.com/
    それとも他のページなのか。
    僕のテスト環境からでは、余白が出ないようなので。
    iPhoneで試さないとでないということでしょうか(持っていない^^;)。

  • #59361 返信

    Akira

    一見ちゃんと表示されていますが、めちゃくちゃ右にスライドできますね。

    原因はにーちぇさんがおっしゃっているとおり、フッターの横幅が 740px になっていることです。

    以下の CSS を子テーマの style.css に追加し、ご確認をお願い致します。

    @media screen and (max-width: 740px) {
      div#footer-in {
        width: 100%;
      }
    }
  • #59362 返信

    にーちぇ

    わいひら様、Akira様

    スタイルシートに入力してもなせか解決できなかったのですが、
    mobile.cssに入れたところ、無事フッターも100%表示となり、右側の余白も
    無くなりました!

    このたびは、本当にありがとうございました。
    非常に助かりました。

返信先: スマホ表示で右側に余白ができてしまいます
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)