cocoonのカスタマイズでヘッダー画像の高さをMax800pxにしたとき、横幅1024pxで下に隙間ができる件で、色々調べました。
cocoonを使ってウェブサイトを作っていますが、今回ヘッダー画像が高さMaxの800pxで作っています。
画面の横幅が1280pxの時は、綺麗に収まります。
でも横幅が1024pxの時は、ヘッダー画像のと記事のタイトルの間が、大きく空いてしまいます。
色々調べて、子テーマのCSSに下記のメディアクエリを設定すると解決しました。
@media screen and (min-width: 1023px) and (max-width: 1279px) {
#header {
height: 420px;
}
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
#header {
height: 520px;
}
}
cocoonは、画面の横幅が1024px以上でパソコン用の画面になるため、ヘッダー画像が縦400px以上を使うとヘッダー画像と記事タイトルの間に隙間ができてしまう可能性があります。
1279pxまでモバイル用のヘッダーのcssが、適用されるようにすると良いと思います。