スマホ表示でのカテゴリー（親子）の上下の余白について

PR 2016/2/14

このトピックには3件の返信、2人の参加者があり、最後にわいひらにより10年、 7ヶ月前に更新されました。

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

投稿者

投稿
- 2016年2月14日 12:32 AM #36487
  
  okita926
  ゲスト
  
  初めて質問させていただきますokita926と申します。
  
  先週よりsimplicityをダウンロードさせてもらい使用させていただいております。
  ホームページ作製の初心者のため、ネットで調べながらCSSファイルをいじりレイアウトの調整をしております。
  編集環境としましては、子テーマをインストールし、子テーマのstyle.cssやmobile.cssを編集しております。
  
  試行錯誤してみましたが、どうしても改善できなかったのでこの度質問させて頂きました。
  
  スマホ表示でのカテゴリー（親子）の上下の余白調整について質問です。
  
  カテゴリー設定で親カテゴリーと子カテゴリーを設定しています。
  スマホでこのカテゴリーのリストを見ると、親のカテゴリーの下に余分な余白があり、どうしてもなくすことができません。（画像参照）
  
  過去の記事を参考にmobile.cssを以下のようにしてみましたが上手くいきませんでした。
  カテゴリーの親と子の空白サイズを調整したい
  
  ＜追加した文章＞　mobile.cssに追加
  #sidebar ul li{
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  }
  
  ちなみに上の追加文章をstyle.cssに追加してPC版でみると、PC版のカテゴリーでは改善されています。
  
  どうすればスマホ版のカテゴリーの親子の上下の余白をなくせる（調整できる）でしょうか？
  お手数おかけしますが、ご教授願いいたします。
  
  (現在編集中のサイトはhttp://okita926.comです。)
- 2016年2月14日 12:56 AM #36488
  Hidekichi
  ゲスト
```
@media screen and (max-width: 440px){
  #sidebar .widget_categories li ul.children {
    margin-top: 10px; /*←これ*/
  }
}
```
```
@media screen and (max-width: 440px){
  #sidebar .widget_categories li ul.children {
    margin: 0;
  }
}
```
  これでマージンはなくなりますので、
```
@media screen and (max-width: 440px){
  #sidebar .widget_categories li ul.children {
    margin: 0;
    padding: 4px 0 10px;
  }
}
```
  ぐらいがちょうどよいですかね。ここらは要調整です。
- 2016年2月14日 7:41 PM #36507
  
  okita926
  ゲスト
  
  Hidekichiさま
  
  早速のご返信ありがとうございます。
  
  早速頂いた文章を試してみたところ、余分な余白が消えました！
  ３日くらい苦戦してましたので感激です！
  本当にありがとうございました。
- 2016年2月15日 5:54 PM #36530
  
  わいひら
  キーマスター
  
  ご報告ありがとうございます。
  確かに表示おかしいですね。
  テスト環境でも確認しました。
  手元のファイルは修正したので、次のバージョンで改善されるかと思います。
投稿者

投稿