Home>Support>Responsive Vantage masthead

Responsive Vantage masthead

By Graham Smith, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi

I have a masthead image that is 1350x151px and slider images (for Meta Slider) that are 1350x250px

The slider images change size according to the browser size, but the masthead image does not. Both images are connected as you can see from www.marketinggraham.co.uk

Also, when I view the site on my mobile the slider image is reduced (good) but the masthead image is massive (bad). Can both problems be solved with one piece of code?

Many thanks

URL: http://www.marketinggraham.co.uk

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi Graham

    Try the following under Appearance > Custom CSS:

    /* Masthead Background Image Cover */

header#masthead {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

    OR try this:

    /* Masthead Background Image Cover */

header#masthead {
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
  2. 9 years, 8 months ago Graham Smith

    Hi Andrew, Im afraid neither of those two worked. The first resizes the image but not in the same proportion as Meta Slider, and the second did not resize much at all as I changed the width of the browser (Chrome).

    Is it possible to use the same code as Meta Slider?

    Many thanks

  3. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Try the following instead:

    header#masthead {
background-size: 100%;
}

@media (max-width: 680px) {

#header-sidebar {
display: none;
}

.main-navigation ul {
margin-top: -47px;
}

}
  4. 9 years, 6 months ago Comfort Mobile

    Hello Andrew Misplon, my situation is opposite to the one described above. Please see the site.
    http://www.comfortmobile.net/
    On mobile I get my logo and menu works perfect but the banner (Meta Slider) does not adjust according to the screen size. I did try to check all possible that I can but no luck. I really need an expert advise to fix this.

    Thank you Kindly.
    Waqar

    • 9 years, 6 months ago Andrew Misplon
      Hi, I Work Here

      Hi Comfort Mobile

      We’d like to help you, but can you please start a new thread with your question? We can only offer you the best support possible when you’re the owner of a thread.

      Page: New Thread

      If you’re a premium user, please be sure to enter your order number so we can properly prioritize your thread.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More