This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to make Vantage masthead background image responsive

Resolved 6 replies customizationthemetheme-vantage
bleazy
7 years ago · Last reply by bleazy 7 years ago

Hello, I am inquiring on how to make Vantage masthead background image responsive.

Any help is appreciated, this is the free version, not premium.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Alex S Staff 7 years, 6 months ago

    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.

  2. bleazy 7 years, 6 months ago

    http://jamigray.com/

  3. Alex S Staff 7 years, 6 months ago

    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.

  4. bleazy 7 years, 6 months ago

    that helped with the resize, but now in mobile the logo is far too small.

    thanks for the support thus far, any answer on this last thing and we should be good!

  5. Alex S Staff 7 years, 6 months ago

    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.

  6. bleazy 7 years, 6 months ago

    that CSS did the trick. thanks for your support!

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread