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

Home Forums Support header image (Gutenberg) not working on mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #989593
    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

    #989595
    David
    Staff
    Customer Support

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

    #989896
    David
    Staff
    Customer Support
    #990060
    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;
    }
    }

    #990145
    David
    Staff
    Customer Support

    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.

    #990350
    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

    #990502
    David
    Staff
    Customer Support

    Awesome – glad to hear that worked 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.