余白を無くすのは、タブレットサイズ（768px以下）にしますか？
それとも、スマホサイズ（480px以下）にしますか？
それによって、CSSの書き方が変わってきます。

早速返答ありがとうございます！

自分の希望としては、各デバイスとも上と下のスペースを出来るだけ同じにしたいと思っています。例えばですが、スマホサイズは余白をなくし、タブレットサイズは50%にする、などの微調整をする指定は難しいでしょうか。

別々の指定になると難しい場合は、どちらがしっくりくるかで決めたいので、480px以下/768px以下の両方の場合を知りたいです。

お手数おかけします。

一応CSSを書きましたが、よくよく見るとCSSで出来ることはあまりないような気もします。

@media screen and (max-width: 768px){
  .logo-image {
    padding: 5px 0;
  }
}

@media screen and (max-width: 480px){
  .logo-image {
    padding: 0;
  }
} 

そもそも、画像自体に余白があるため、画像の余白を減らさないとこれ以上どうしようもないかもしれません。

あと、CSSの調整ミスがあったので、以下のファイルでアップデートしていただくと、下部分の余白が少し狭まると思います。

https://github.com/yhira/cocoon/archive/master.zip

返答ありがとうございます。

もしかしたら自分の間違いかもしれませんが、上のコードをスタイルCSSに入れ、親テーマも入れ替えましたがあまり変わった様に思いません。

外観タブ/css編集の、レスポンシブル表示が切り替えられるページをスクリーンショットし、下に添付しました(上からPC→タブレット→スマホ)。

それを見ていただくと、PC→タブレット→スマホといくにつれ、ヘッダーと本文間のグレー表示されている部分が変わらない(周りは小さくなっているからグレー部分がより大きく見えてしまう)、そして本文のスペースだけを見ても、一行目の破線までの距離が徐々に広くなっています。ここを修正する方法はないでしょうか。

破線が原因かと思い、破線を無くしてもスペース自体は変わりませんでした。また、ヘッダー画像自体は上下の余白ほぼ同じでアップロードしています。下の余白を削り、上の余白を多めに取るなどでバランスを取ろうと試みましたが、ヘッダーの余白が上下共に広くなりすぎてこれも失敗でした。

すいません。そっちの方もだったんですね。
それは、親テーマ側で対応するべきと考えたので、親テーマのコードを修正しました。
修正版はこちらになります。
https://github.com/yhira/cocoon/archive/master.zip

それでも長いようでしたら、.entry-contentクラスのトップマージンもCSSで変更してください（ここは灰色の部分ではないですけど）。

返答ありがとうございます。

教えていただいたように修正したところ、かなり幅がせばまりました！

なぜか、スマホタブレットは.entry-contentマージン０にしてもスペースが０ではなく少し残ります(PCは余白０にちゃんとなる)。以前の別質問の時も、似たような症状がありましたが、もしかしたらスマホ用 空のウィジェットみたいなものが残ってしまっているのですかね？最終的に、ヘッダーの画像自体のスペースをわずかに下の余白小さめにし、ほぼイメージどおりの位置になりました。

こちらでいただいた親テーマですが、今後cocoonアップデート通知が来た場合、そのままアップデートしても大丈夫でしょうか。

デベロッパーツールで確認した限りでは、モバイルでも.entry-contentのトップマージンは0になっているようです。

ここで公開したファイルの上に、どんどん不具合修正や、機能追加がされていくのでそのままアップデートしていっていただければと思います。

返信ありがとうございます。

了解です。

いつも、丁寧に対応していただきありがとうございます。