I have a large gray area below header on Mobile

Hello,

You are attempting to use the header cover image as a banner image which never goes will with this theme because the banner only has a finite height and the header height is dependant on the viewport height.

You have also set the height to be 50% of the viewport height in “Customizer – Additional CSS” …

.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
    height: 50vh !important;
}

… which is affecting smaller screens and creating the grey area there and it looks like you have also set the height of the header to be fixed in “Customizer – Header Options – Header Height”. That’s fine but if you do that as well as using “Full Cover Image” option above then you run the risk of having a header height that is higher than your header image’s height.

So what to do?

We would recommend having the abstract “Crochet” image as your header cover image without the title text or forcing the “Full Cover Image” option. Then add the title text in using the “Customizer – Site Identity” settings and changing the font used by utilising a Google font or other font plugin.

Oliver

Oliver ,

Thank you for your speedy reply and great solution. I was thinking last night that the additional CSS might be the culprit. I remove that CSS, which I was using before using Options, and the solved the problem. I now have just a very thin gray line which is of no consequence.

Thanks again.

OK that’s good news.

Oliver