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.

Mobile Site Header Padding

Resolved 10 replies premiumthemetheme-vantage
Trevor Wolfe
11 years ago · Last reply by Brent Bareham 9 years ago

Last Question!

How do you change the header padding on the mobile site? There’s a lot of white space between the menu and the logo. Also, is there a way to hide the page background image and masthead background image on the mobile site?

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

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Andrew Misplon Staff 11 years, 9 months ago

    Your background image isn’t get full coverage on desktop, you can try this Custom CSS to resolve:

    /* Background Image */

body.custom-background {
background-image: url('http://vandpastravsuceava.ro/wp-content/uploads/2014/05/waiting-for-a-breeze-cut1.png');
background-repeat: no-repeat;
background-position: center center !important;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

    You can adjust your header as follows. Change the 960px breakpoint and header padding as required:

    /* Header */

@media screen and (max-width: 960px) {
header#masthead hgroup {
background-image: none !important;
padding-top: 46px !important;
padding-bottom: 46px !important;
}
body.custom-background { display: none !important; }
}
  2. Trevor Wolfe 11 years, 9 months ago

    Okay so the first one removes the background image for the whole page. I just wanted to remove the background image that i used for the header and body area. which I used to put a line around the edges. When I go to customize and then page, that is where I added the masthead background image and page background image. These are the two that I would like to hide for mobile.

    As far as the second section of code you gave me, when I put it in, the whole mobile page turns white.

  3. Trevor Wolfe 11 years, 9 months ago

    After messing around with it, I figured out that this is the line causing the white screen in the second set of code.

    body.custom-background { display: none !important; }

    Not sure how to fix this though

  4. Andrew Misplon Staff 11 years, 9 months ago

    Try this.

    @media screen and (max-width: 960px) {
header#masthead hgroup {
background-image: none !important;
padding-top: 46px !important;
padding-bottom: 46px !important;
}
#main {
background-image: none !important;
}
}
  5. Trevor Wolfe 11 years, 9 months ago

    That worked to get rid of the main background image, but the header background image is still showing for some reason.

  6. Andrew Misplon Staff 11 years, 9 months ago

    Take out the hgroup:

    @media screen and (max-width: 960px) {
header#masthead {
background-image: none !important;
padding-top: 36px !important;
padding-bottom: 5px !important;
}
#main {
background-image: none !important;
}
}
  7. Trevor Wolfe 11 years, 9 months ago

    Hmmmm that seemed to work, but now it won’t let me remove as much padding as it did previously. Even when I set both top and bottom to 0, there is a lot more white space between the logo and header than before when I had the hgroup in there. Not sure why this would effect anything.

  8. Trevor Wolfe 11 years, 9 months ago

    I separated the code using the hgroup for just the padding part and now it works. Thanks for all of your help!

  9. Andrew Misplon Staff 11 years, 9 months ago

    Super, glad you were able to resolve.

  10. Brent Bareham 9 years, 6 months ago

    Hello!

    I have the same issues and have arrived at the same place, not enough padding adjustment below the header image, however I can figure out how to reconfigure the hgroup function to make this work. Could either of you please post the final coding that worked?

    Thanks so much!

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