How to make Vantage masthead background image responsive

Hi Bleazy,

Do you have a public URL where we can take a look at your masthead? I ask because depending on your image, it may not be possible.

Hi Bleazy,

Thanks. Based on the image, your best bet would not add it as a background. Please navigate to WP AdminAppearanceCustomize. Go to Theme DesignPage and remove the Masthead Backgorund. Go back to the Theme Design settings group and open the General settings group. Set the Heading Padding to 0.

Go back to the customizer base and open Theme SettingsLogo. Set the image you were previously adding as the masthead background, and set it to the Logo.

Hi Bleazy,

I would recommend editing your logo and removing a lot of the blank spacing. This will allow for the logo to appear larger on mobile while still retaining the effect to a certain degree.

Also, please add the following CSS to WP AdminAppearanceCustom CSS:

@media (max-width: 680px) {
	.support-text {
		display: none !important;
	}

	#masthead {
		padding: 0;
	}

	.main-navigation {
		margin: 0;
	}
}

You might also need to install the SiteOrigin CSS Editor.