[Resolved] How to format top margin of blog page to match static pages

[Michael]

Sorry that I must be missing something obvious but on this blog page –

https://mdessen.com/news/

– there is less space between the menu and the page content (the first post) than there is on the other pages in the main menu, so I am trying to add a top margin to that blog page via CSS, but can’t get it to work. I have tried putting this CSS in the Simple CSS field in the editor for that blog page:

.site-content {
margin-top: 30px;
}

Can you explain why it’s not working and how I can do this? Thanks!

[Fernando]

Hi Michael,

In Appearance > Customize > Layout > Container, can you try adding Top Padding in the Content Padding?

Reference: https://docs.generatepress.com/article/container-layout-overview/

Kindly let us know how it goes.

[Michael]

Hello Fernando and thank you. Doing that affects all pages, not just the blog page. The other pages (the main pages on the menu and all other pages on the site) are already correct, which is why I thought I needed CSS to change only the blog page, without changing the others. Any other suggestions?

Michael

[Michael]

To clarify: That padding setting you mention adds padding to all pages (including the blog page and all others), and what I want is to only add it to the blog page.

Michael

[Ying]

Hi Michael,

The top padding is the same (10px) on the blog page or other pages, it just looks different.
blog page: https://www.screencast.com/t/vyxjNPiQ
other page: https://www.screencast.com/t/2iyzPGvKH

If you want to add more padding only for blog page, try this CSS:

.blog.one-container .site-content, .inside-page-header {
    padding-top: 30px;
}

[Michael]

Thank you, Ying. That CSS worked.

[Ying]

You are welcome 🙂

[Michael]

Ying, I just realized I have a related question in case you can help me with this? By “other pages” I actually meant the static pages (or portfolio items) that are the other main menu links. My understanding is that the gap between the menu and the content on those pages is being created because the page title is being hidden, and the gap is where that title would be if it were appearing. Correct? If so then how would I control that when hiding the page title so that this space is not created on pages where the page title is being hidden? Thank you!

[Ying]

Checked the teaching page which is a single portfolio, the space is reserved for the H1 title which is being hidden by the CSSvisibility: hidden;

This makes things tricky, can you tell me why you usevisibility: hidden; instead of display:none; which removes the space as well?

[Michael]

Thank you ver much, Ying! I will just use display: none;. I didn’t have a particular reason but now understand the difference and that will help me solve it.

[Ying]

You are welcome Michael 🙂

[Author]

Posts