Mobile Home Page Header

I think the ratio of your header image is incorrect. It should be ‘2000px wide by 1200px height’.

Hi Andrew,

Thanks for the reply. It is 2000px W x 1199px H. I cropped it when I uploaded it. Changing that one pixel didn’t do anything. Any other ideas?

Hmm okay that’s not the problem. The problem is actually coming from the modifications you’ve made to your theme’s stylesheet on line 1657. These problems are really difficult to spot when you edit the theme like that, beacuse you are literally wadign through thousands of lines of code to see the problem.

It’s much better for maintenance to create a Child Theme or use your ‘Additional CSS’ part of the dashboard for these modifications. Simply copy the style you want to edit and paste it into either the bottom of your Child Theme style.css file or ‘Additional CSS’ section and change it there.

The original code was:

.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 {
	display: table;
	height: 300px;
	height: 75vh;
	width: 100%;
}

But you changed it to:

.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 {
	display: table;
	height: 300px;
	height: auto;
	width: 100%;
}

So I would recommend reverting that change.

Ok, I figured it out. And for anyone else who wants to do the same, all I did was change the position from fixed to absolute which was around line 1690 in style.css.

has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
	position: absolute; 
	height: auto;
	left: 50%;
	max-width: 1000%;
	min-height: 100%;
	min-width: 100%;
	min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
	width: auto;
	top: 50%;
	padding-bottom: 1px; /* Prevent header from extending beyond the footer */
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}