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

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

  • このトピックには5件の返信、2人の参加者があり、最後ににより1年、 2ヶ月前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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%表示となり、右側の余白も
      無くなりました!

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

5件の返信スレッドを表示中
返信先: スマホ表示で右側に余白ができてしまいますで#59361に返信
あなたの情報:




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