[Resolved] Reduce space between header and content on single post pages (on MOBILE only)

[Michelle]

How do I reduce the gap between the header and content on mobile? My archive, author, category, and single post pages have a gap and I can’t find a place to close this padding without it also affecting other pages on my desktop and tablet sites.

[Ying]

Hi Michelle,

Any chance you can link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Michelle]

Here is my link:

https://www.reachingmyworld.com

[David]

Hi there,

theres an empty Paragraph block above the GB Grid Wrapper.
WP in a recent updated decided that empty paragraphs should be output on the front end – doh!

Ideally you would want to delete any empty text blocks wether that be in your post content or a block element ( select it and backspace delete ).

Or you can add this CSS to stop them occupying any space.

p:empty {
    display: none;
}

[Michelle]

I added the code, but did not see a difference in the padding on mobile between the title and content. The issue is only on single post pages, author, archive, and category pages which use native WordPress rather than WP Show Posts Pro.

[Ying]

Hi Michelle,

You have this CSS which adds 50px top margin to the single post content:
https://www.screencast.com/t/GOpC4f7SoM

Can you try remove it of reduce the value?

[Michelle]

I could do that, except I like the padding on the Single Post pages for desktop and tablet sites. It’s the MOBILE only that I’d like to change…

[Ying]

OK, then try this CSS:

@media (max-width: 768px) {
    .single-post header.entry-header {
        margin-top: 10px;
    }
}

[Michelle]

That’s so much better. What an improvement!

[Ying]

Glad to hear that 🙂

[Author]

Posts