Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
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?
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; } }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.
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
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; } }That worked to get rid of the main background image, but the header background image is still showing for some reason.
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; } }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.
I separated the code using the hgroup for just the padding part and now it works. Thanks for all of your help!
Super, glad you were able to resolve.
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!