Space between Header an Content

This topic has 16 replies, 4 voices, and was last updated 3 years, 9 months ago by Ying.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
July 1, 2022 at 7:51 am #2270462

Marius

Hello,

when I set in customizer Layout to “Container separated from each other” the there is a Space between the Header and the Content Container.
When I set the Layout to “One Container” there is no space.

Can i get this space with the “One container” setting?

July 1, 2022 at 11:22 am #2270589

Leo
Staff
Customer Support

Hi there,

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

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

Let me know 🙂

July 1, 2022 at 11:56 am #2270613

Marius

I can not link page because it is not public. Please try to help me anyway.

On the screenshot you can see that there is no space between the header and the content area. There should be a space there with the grey body background color.

https://prnt.sc/Z1DYKCoRUYmb

July 1, 2022 at 4:03 pm #2270708
Leo
Staff
Customer Support
Try this CSS:
```
.site.grid-container {
    margin-top: 10px;
}
```
July 1, 2022 at 11:51 pm #2270868

Marius

Hi Leo,

this helps with the blog page.

But the home page is a page with a featured image. And the featured image still sits on the header without space:
https://prnt.sc/_tX4ZPfJkJ9Y

There the css you provided, did a space between the featured image and the content. But there should be no space:
https://prnt.sc/gFAbBkbCJFTl

July 2, 2022 at 8:03 am #2271263

Marius

And it would be nice, if I can the same space also between content container and footer.

July 2, 2022 at 8:11 am #2271268

David
Staff
Customer Support

Hi there,

is this only on the Home Page ? Or are there other pages like this ?

July 2, 2022 at 8:22 am #2271273

Marius

the home page is a page with a featured image, but there are more pages like that. The space should be on all sites, so that all looks equal.

July 2, 2022 at 8:27 am #2271280

David
Staff
Customer Support

Try this CSS instead:

`.page-header-image,
.site-footer {
margin-top: 2em;
}

July 2, 2022 at 8:41 am #2271293

Marius

this works with the homepage, but then on the blog page is only space on the footer, but not on header.
And also, if there is no featured image on page, there is no space on header.
And on posts, there is also no space to the header.

July 3, 2022 at 2:21 am #2271592
David
Staff
Customer Support
Hopefully…. try this:
```
.site-header {
    margin-bottom: 2em;
}
.site-footer {
    margin-top: 2em;
}
```
July 3, 2022 at 6:40 am #2271767

Marius

unfortunately not 🙁 With this there is space at the footer, but neither at pages nor at the blog page at the header.
But if that doesn’t work, then I will choose the separated containers in case of need, although with that the blog page doesn’t look so good.

July 3, 2022 at 6:48 am #2271771

David
Staff
Customer Support

Is it possible to see the site ?
If we need a login – you can provide those details in the Private info field

July 3, 2022 at 7:06 am #2271783

Marius

This is an old testsite which is not public.
I have give you the login in the private field.
I have removed the provided css.

July 3, 2022 at 12:02 pm #2272078
Ying
Staff
Customer Support
Try this CSS:
```
.main-navigation {
    margin-bottom: 40px;
}
.site-footer {
    margin-top: 40px;
}
```
Author

Posts