[Support request] header image (Gutenberg) not working on mobile

[Eva]

Hi!
I used the Gutenberg CoverImage block as a header image for every page on a site I am working on. It works fine on a big screen, but on mobile I see the whole image… Do you have an idea how to avoid this, and have the same look on mobile?
Thank you!
Eva

[David]

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;
    }
}

[Eva]

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

Eva

[David]

Glad to be of help

[Eva]

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;
}
}

[David]

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.

[Eva]

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

[David]

Awesome – glad to hear that worked 🙂

[Author]

Posts