Header image white space and mobile view

Hi, I’ve already read and followed the advice on the other white space and header image forum posts. There is still way too much white space in the header and title areas. You can see what I mean here: http://psychedelicdoilies.com. Also, before the header wasn’t responsive in mobile view and stayed very large. I followed the advice in one of the other forums to use the code:

/resize heading/
@media (max-width: 550px){
.custom-header {
background-size: contain;
height:200px !important;
}
}

Now the header is displaying much smaller in mobile view but it’s too small.

Hey there,
I hope you’re doing well today

The excess white space is being caused by the image itself.

Crop the image removing some of the white space above and below for a lower profile.

Best Regards,
Support

I’m using the recommended image size for the header. If I crop it the image becomes distorted.

Understood,

In that case you can try this method, which reduces the container holding the logo,
The quality of the image remains intact when tested on your site. Let me know if this works for you when you’ve placed it in your style sheet.

/reduce header height/
.custom-header {
height: 200px !important;
}

Best Regards,
Support

Hi, that does help some. I still feel like there’s some unnecessary white space. I’ve attached a picture highlighting the space in red. Also, now the header feels a little too close to the content. What I mean is, as you can see in the attached picture, there is a lot of space between the header and the menu and not as much between the header and the content below. It feel unbalanced. Thank you for all your help.

Hello there,

You can use the following CSS code to reduce the space by going to Appearance > Customize > Additional CSS and pasting it there.

Reduce white space
.site-branding {
        padding: 20px 0 0 0;
}

#primary-menu > li > a {
    padding: 20px 0 0 0;
}

Let me know how that works.

Best Regards,
Support