Home>Support>Mobile Site Header Padding

Mobile Site Header Padding

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. If you need fast email support, please purchase a SiteOrigin Premium license.

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

    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. 7 years, 8 months ago Trevor Wolfe

    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. 7 years, 8 months ago Trevor Wolfe

    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. 7 years, 8 months ago Andrew Misplon Hi, I Work Here

    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. 7 years, 8 months ago Trevor Wolfe

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

  6. 7 years, 8 months ago Andrew Misplon Hi, I Work Here

    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. 7 years, 8 months ago Trevor Wolfe

    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. 7 years, 8 months ago Trevor Wolfe

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

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

    Super, glad you were able to resolve.

  10. 5 years, 5 months ago Brent Bareham

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More