完全レスポンシブで横スクロールバーが表示される

Simplicityの特徴 フォーラム 不具合報告 完全レスポンシブで横スクロールバーが表示される

このトピックには3件の返信が含まれ、1人の参加者がいます。6 日、 5 時間前 欅 さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #62018

    初めまして。欅と申します。
    今回、初めてsimplicity2を使用してサイトを作成しております。
    完全レスポンシブ表示で、モバイル時はモーダルメニューを使用していますが、ブラウザの幅が740~761pxの場合に、横スクロールバーが表示されてしまいます。
    デベロッパーツールで確認したところ、「<div id=”animatedModal”>」のエリアのみブラウザの幅を超えてしまっているようです。
    cssは修正しておらず、管理画面上のカスタマイズしかしていないのですが、
    何か原因はありますでしょうか?

    お手数をおかけしますが、よろしくお願いいたします。

  • #62024

    Akira

    テスト環境で試したのですが、横スクロールが発生しません。

    実際のサイトを拝見しないと、原因も解決方法も分からないかもしれません。

    現時点で考えられる解決方法は、このようなものです。

    • ブラウザのキャッシュを削除する
    • サーバーやプラグインが生成するキャッシュを削除する
    • プラグインを全て停止する
    • デベロッパーツールの Console タブでエラーが出ていないか確認する
  • #62031

    遅れてしまいましたが、ご回答頂きありがとうございます。
    現在ローカル環境にて作成中のため、公開できていませんが
    とりあえず、上記の解決方法を試してみたいと思います。

    ありがとうございます。

  • #62055

    自己解決したので、内容を記載しておきます。

    cssをいろいろ修正しているため、自分だけのケースかもしれませんが、
    responsive.cssの「740px以下のスタイル」の部分を
    761以下に変更すると、横スクロールバーが表示されなくなりました。

    多分ですが、window幅が740~761pxで縦スクロールバーが表示されている場合
    実際の表示アリア(div#body-in)は、縦スクロールバーの幅(21px?)を除いた719px程ですが
    そこに740pxの#div#mainを表示していたため
    横スクロールバーが表示されてしまっていたようです。

トピック「完全レスポンシブで横スクロールバーが表示される」への新規返信追加は締め切られています。

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