Archived topic
How can I change the padding between header and content on device mode only?
14 replies · Started by Jason on January 20, 2017
As in customize it changes it for both, but would like to only shorten the padding in device and mobile mode only, is there a way to do this in CSS please? thank you
Hi Jason,
Try this CSS below:
@media (max-width: 768px) {
.site-header {
margin-bottom: 15px;
}
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know.
In the next GP Premium there's a mobile content padding option.
If you want to adjust the content padding instead of add margin to the site header, you can do this:
@media (max-width: 768px) {
.separate-containers .inside-article,
.one-container .site-content {
padding: 30px;
}
}
ok thank you, will try the 2nd option, thanks :)
Hi mate, that's not working, I mean I want the padding between the content and the top header or nav bar to be smaller in mobile devices etc, as at the moment there is a huge gap of wasted space if you can please see my site http://salsarepublic.com.au/ on desktop there is very little space between the header, main menu bar, but in mobile devices there is too much padding.
Try this CSS:
@media (max-width: 768px) {
.container, .one-container .site-content {
padding-top: 0px;
}
}
Let us know.
yeah that didn't work either, hmmm is that meant to be for mobile and devices only?
Yes the @media part makes it mobile only.
Just checked your site again I don't see the CSS being added?
You have an empty paragraph tag which is contributing to the space as well: https://www.screencast.com/t/EzCdTvQV
I just copied and pasted what you gave. Though I removed that extra paragraph and it didn't make any difference. there is still a gap between the menu bar and the content on decives. :(
yeah I added it with Simple CSS plugin form.
I still don't see the code being added/executed.
Have you added other codes in Simple CSS? There might a syntax error in there to stop the codes from executing.
To test, can you move the the block of code I provided above to the top of Simple CSS editor (Appearance > Simple CSS)?
Still looks like the empty paragraph causing the spacing to me: https://www.screencast.com/t/fYdM9KTmVbn
I havent added anything in there, like I said I copied and pasted what you gave me
Ok I saw the code after clearing cache. You might need to do so too.
The last bit of white space is from a paragraph like Tom mentioned.