Header image not responsive

Preface: This reply only applies to Vantage Premium and only really to Heinz’s setup.

Hi Heinz,

As you’re a Vantage Premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on this page. Please reference this thread.

Ideally, you should try and keep the logo and masthead background separated the responsive backgrounds are… well they’re weird. Basically, they will retain the aspect ratio no matter what and it’ll crop the image to ensure this.

If you navigate to WP AdminAppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

@media (max-width: 814px){
	#masthead {
		background-size: cover;
		position: relative;
	}
	.hgroup {
		padding: 0 !important;
	}
	#header-sidebar {
		padding: 0 !important;
		margin: 0 !important;
		position: static !important;
	}
	.main-navigation {
		bottom: -65px;
		position: absolute;
		width: 100%
	}
}
@media (min-width: 310px) and (max-width: 410px){
	.site-header {
		min-height: 200px;
	}
}
@media (min-width: 410px) and (max-width: 480px){
	.site-header {
		min-height: 250px;
	}
}
@media (min-width: 480px) and (max-width: 539px){
	.site-header {
		min-height: 300px;
	}
}
@media (min-width: 540px) and (max-width: 676px){
	.site-header {
		min-height: 325px;
	}
}
@media (min-width: 677px) and (max-width: 814px){
	.site-header {
		min-height: 400px;
	}
}

You might also need to install the SiteOrigin CSS Editor.