モバイル時スライドインのサイドバーについて

PR 2016/12/10

このトピックには4件の返信、2人の参加者があり、最後にkittyhawkにより8年前に更新されました。

4件の返信スレッドを表示中

投稿者

投稿
- 2016年12月8日 9:25 AM #48444
  kittyhawk
  ゲスト
  モバイル時のメニュー設定をスライドインにした際、サイドバー側のスライドインをスクロールすると右左に若干ブレてしまいます。
  細かい部分ですがこれをメニューのスライドインのように右左固定化することはできないでしょうか。
  
  試してみたところ以下の調整をしたら固定になりました。
```
#sidebar-widget{
    overflow: hidden;
}
```
  ご検討ください。
- 2016年12月8日 7:58 PM #48457
  
  わいひら
  キーマスター
  
  ご報告ありがとうございます！
  CSSからして、ウィジェット内の何かがはみ出していたのでしょうか？
  よかったら、不具合状態を再現してテストしたいので、不具合ページのURLを掲載していただくことは可能でしょうか？
- 2016年12月9日 9:02 AM #48477
  
  kittyhawk
  ゲスト
  
  お返事ありがとうございます！
  
  私のページは取り急ぎoverflow:hiddenとpaddingの調整等を反映してしまいました
  http://wotb.communityfield.net/
  http://communityfield.net/
  
  先ほど自サイトのsidebar-widgetのoverflow:hiddenを開発ツールで取って見たらブレませんでしたので他の調整ではみ出しがなくなったみたいです
  
  こちらのwp-simplicity.comも若干ですが右左にブレがあるみたいです
  footer-mobile-buttons.css
  div#sidebar
  padding: 10px
  をオフにして
  mobile.css
  div#sidebar
  padding: 15px
  がオンになるとブレがなくなりました
  
  モバイルの画面サイズで状況も変わりそうなので全解決にはなりそうにないですが。。。
- 2016年12月9日 6:00 PM #48508
  わいひら
  キーマスター
  詳細、ありがとうございます！
  
  先ほど自サイトのsidebar-widgetのoverflow:hiddenを開発ツールで取って見たらブレませんでしたので他の調整ではみ出しがなくなったみたいです
  
  確かに、僕も開発者ツールでoverflow: hidden;を無効にしてみましたが、横ズレはないようです。
  
  当サイトも、僕が普段利用しているFirefoxの開発ツールで横幅を320pxにした限りでは、横揺れは感じられませんでした。
  けれど、Chrome（Blisk）で確認したら、確かに横揺れしてますね；
  
  いずれにせよ、サイドバーの横幅をはみ出す物を入れてしまうと、横揺れしてしまうというのは、あると思うので、次のバージョンでは、以下のスタイルを適用しておこうと思います。
```
#sidebar-widget{
    overflow: hidden;
}
```
  多少表示が隠れてしまうかもしれませんが、横揺れするよりは確かに良いような気がします。
- 2016年12月10日 3:11 PM #48551
  
  kittyhawk
  ゲスト
  
  ご確認ありがとうございます！
  
  私の方はChrome開発ツールとiphone7実機で確認していました
  
  またスタイル適用ありがとうございました！
投稿者

投稿