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

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

Home Forums Support How to format top margin of blog page to match static pages

  • This topic has 10 replies, 3 voices, and was last updated 1 month ago by Ying.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #2278972
    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!

    #2278982
    Fernando
    Customer Support

    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.

    #2279614
    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

    #2279616
    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

    #2279713
    Ying
    Staff
    Customer Support

    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;
    }
    #2279748
    Michael

    Thank you, Ying. That CSS worked.

    #2279783
    Ying
    Staff
    Customer Support

    You are welcome ๐Ÿ™‚

    #2279794
    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!

    #2279804
    Ying
    Staff
    Customer Support

    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?

    #2279833
    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.

    #2279840
    Ying
    Staff
    Customer Support

    You are welcome Michael ๐Ÿ™‚

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.