How can I change the padding between header and content on device mode only?

[Jason]

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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jason]

ok thank you, will try the 2nd option, thanks 🙂

[Jason]

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.

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .container, .one-container .site-content {
        padding-top: 0px;
    }
}

Let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jason]

yeah that didn’t work either, hmmm is that meant to be for mobile and devices only?

[Leo]

Yes the @media part makes it mobile only.

Just checked your site again I don’t see the CSS being added?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

You have an empty paragraph tag which is contributing to the space as well: https://www.screencast.com/t/EzCdTvQV

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jason]

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. 🙁

[Jason]

yeah I added it with Simple CSS plugin form.

[Leo]

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)?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

Still looks like the empty paragraph causing the spacing to me: https://www.screencast.com/t/fYdM9KTmVbn

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jason]

I havent added anything in there, like I said I copied and pasted what you gave me

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts