header image (Gutenberg) not working on mobile

Hi there,

you can use some CSS to set the min-height of all cover blocks like so:

@media (max-width: 768px) {
    .wp-block-cover {
        min-height: 300px;
    }
}

Thanks so much, David! I adjusted the height to 135px and now it's perfect.
Thank you for the support, great as always!

Eva

Glad to be of help

Sorry to get back one more time. I have adjusted the CSS again, because it appeared to be different for landscape and portrait. It's now ok on my Samsung Galaxy A5, but still shorter in landscape mode on my Galaxy Tab A (2016) tablet. Is there another way to adjust this so it works on different tablets and mobile phones? Thanks again!!

This is what I used now:
/* header image mobile only */
@media (max-width: 540px) {
.wp-block-cover {
min-height: 120px;
}
}

/* header image for tablet only */
@media (min-width: 541px) and (max-width: 1200px) {
.wp-block-cover {
min-height: 240px;
}
}

Media queries for different devices are endless.... they use CSS like this:

@media(max-device-width: XXXpx) and (orientation: landscape)

Problem is they are awfully hit and miss and you can find either they don't work or you have lots of them.

Alternatively you could try setting the min-height as a % of the viewport width.

So for your max-width: 768px - try min-height: 40vw; which sets the image height to 40% of the browser windows width. May take some tweaking.

Hi David,
The vw (%) seems to work. I used it like below and now it looks fine om my tablet and phone. I will check iphone and ipad later ... :-)

@media (max-width: 768px) {
.wp-block-cover {
min-height: 32vw;
}
}
@media (min-width: 769px) and (max-width: 1280px) { .wp-block-cover {
min-height: 28vw;
}
}
Thank you for your help and patience!
Eva

Awesome - glad to hear that worked :)