[Support request] How to minimize the space between header and content on the posts?

[Grega]

Hi there, I’d like to minimize the space between the header and content on the posts. Actually, I’d like to move the whole “post content frame” into the header.

Please find the image attached.

Thanks for your reply!

[Ying]

Hi Grega,

We could achieve it by adding a negative top margin to the content.

.single-post .site-content {
    margin-top: -80px; /*adjust the number depends on your needs*/
}

Above CSS only target the sing post pages, if you’d like to apply to the entire website, just remove the .single-post.

Let me know 🙂

[Grega]

Hi Ying, thanks for your quick reply. I tried it out, but nothing happens.

Could you have a look at my code? Maybe there is something else disabling this code to work.

I attached the login data 🙂

[Ying]

Ah I see, they are not single posts, they are pages, then it’s hard to target in CSS.

Could you provide a list of pages that you don’t want this layout, then I’ll exclude them in the CSS.

Let me know 🙂

[Grega]

Hi Ying, actually, they are posts. So I want to do this on posts, not on pages 🙂 Some pages do look the same as posts, but my goal is to just change this on all the posts 🙂

[Elvin]

Hi,

You can try adding this CSS:

body.single.separate-containers .site-main {
    margin-top: 0;
}

This should remove the space between the hero and the main content.

If you must also remove the top padding of the main content area, you can also add this CSS to the mix:

body.single.separate-containers .site-main .inside-article {
    padding-top: 0;
}

[Grega]

That fixed the issue, thanks a lot! 🙂

[Elvin]

No problem. Glad to be of any help. 🙂

[Author]

Posts