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.

Responsive Vantage masthead

Open 5 replies premiumthemetheme-vantage
Graham Smith
11 years ago · Last reply by Andrew Misplon 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Andrew Misplon Staff 11 years, 1 month ago

    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. Graham Smith 11 years, 1 month ago

    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. Andrew Misplon Staff 11 years, 1 month ago

    Try the following instead:

    header#masthead {
background-size: 100%;
}
@media (max-width: 680px) {
#header-sidebar {
display: none;
}
.main-navigation ul {
margin-top: -47px;
}
}
  4. Comfort Mobile 10 years, 11 months ago

    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

    • Andrew Misplon Staff 10 years, 11 months ago

      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.

Have a different question or issue?

Start New Thread