Gap between header and content?

[frevi]

Hey, I noticed there’s a kind of large gap between the bottom of the header and the top of the content when I create a page in Pro. I think designers would call this “dead space”, and try to eliminate it in a lot of situations, or at least control it somehow.

Can you try to answer this in a way that solves the issue with your first reply please? It would be great if you could read my whole post here, maybe think about it, and write a coherent reply that addresses the issue please. If you’re just going to send me a link to follow, please make sure it has the complete answer in it (not just maybe, or the first hint that I have to follow more links to find out whether there’s an answer, or the other posts that come up automatically which I’ve read, etc.). Thanks in advance for that.

I can control the header in the header builder, and the content in the content builder, but I can’t find where to control the properties of this gap. In particular, it would be nice to be able to set:

• Dimension (height), e.g., reduce the amount of space between the header and the content - It’s not the header margins (Bar 80px tall, has no margins; container bottom margins are all zero) or any paddings; it’s not any of the margins or paddings in Content.
• Color: This area doesn’t take on the background color of the header, or the content, or the background color I set in ThemeOptions|LayoutAndDesign; I can’t find any settings in WordPress for this
• Contents - Not content, that’s controlled in the Content builder I know. But if there’s going to be this huge gap by default, shouldn’t there be a way to put something in it, like an element or something?

If I set the top margin of the Section container in Content Builder to something like -12EM, that does reduce the gap, but that doesn’t seem like a best practices kind of solution.

• Is it common to put such huge numbers into margins when using Pro?
• Shouldn’t there be a fairly straightforward way to control that space?
• Shouldn’t the gap between the header and the content start at zero by default, and then you could increase it if there was ever a reason to?

Isn’t there a place in the default main overall style.css file to put in a background color once for the whole site (unless it’s subsequently overwritten by some more specific css down the line)?

Is there a place in Pro where I can write in one line of css color that would apply to the whole site (until overwritten by more specific css)? Is that the only way to do that?

Thanks

[christian]

Hey Frank,

Thanks for providing the needed details for us to provide an accurate answer. We really do try our best to resolve the issue in the first reply.

The area that you’re referring to is the Header Landmark which houses the Page Title and The Breadcrumbs. You just don’t see them because your Headings Font Color in Theme Options > Typography is transparent.

The Header Landmark is also shown if you’re using a page template other than the Blank Page Templates. You’re using the default page template on your Gallery page. The full list of page templates can be seen here: https://theme.co/docs/page-settings#page-attributes

Another thing to know about the Header Landmark and this is an answer to your question:

@frevi

Shouldn’t there be a fairly straightforward way to control that space?

The Header Landmark is not editable so you can’t control the gap, height, background color and contents without extensive theme customization using code.

What you can do is, use a Blank No Container page template. This answers your question:

@frevi

Shouldn’t the gap between the header and the content start at zero by default, and then you could increase it if there was ever a reason to?

For your question:

@frevi

Is it common to put such huge numbers into margins when using Pro?

No, it’s not common. If you know what you’re doing though, it’s fine.

------------------------------------------------------------

Regarding the place where you can put CSS, there are 3 areas listed below.

• Global CSS - This is usually used to override the pre-designed style of the theme. You can access this in Theme Options > CSS among the buttons above the Save button.
• Content CSS - This is used for overriding elements and the Global CSS on a per-page basis. This can only be accessed in a Cornerstone built page. Still can be found above the Save button.
• Element CSS - This is for specific elements.

For your case, because you’re using the Icon stack, you don’t have an option to change the background of the whole site. The Icon Stack is a light clean theme so it was pre-designed to have a white background. With that said, you need to override the Site color using CSS. I don’t recommend the use of any custom code if you’re not knowledgeable with the required skill or don’t have access to a personal web developer. If you wish to proceed, you can post your CSS in the areas listed above.

Hope that helps.

[frevi]

Thank you so much, Christian. I really appreciate your reply for several reasons. It’s right on the money accurate; it cuts to the chase; it’s clearly written - not easy I know; you answered all my questions; all the information is really useful. Your reply here is a good model for what an excellent tech support response should look like.

Thanks again.

[friech]

You’re welcome Frank,

Stay safe,
Cheers!