[Support request] Element header: page too high

[Mark]

I have created a header element for the About Us page on my website. I have kept using a smaller (height wise) and smaller image for the background image to try to reduce the page height (so the page only occupies one screen in height). No matter how short (height) I make the image, on the front end it seems to just magnifying instead of reducing the page height. I don’t know if this has to do with background position, padding, or something else. Could you take a look and point out my error?

Thanks,

Mark

[Leo]

Hi there,

Looks like you have the full-screen option activated?
https://docs.generatepress.com/article/header-element-overview/#full-screen

Let me know 🙂

[Mark]

Yes, I do. I’m wasn’t sure what full screen option did, both for the container and the inner container.

Mark

[Mark]

I want to image to be full width, but not expand in height.

[Leo]

Full-screen option would make the height of the page hero to be full-screen.

Turn that off and you can control the height with the padding option:
https://docs.generatepress.com/article/header-element-overview/#padding

To make it full-width, set the outer container to full:
https://docs.generatepress.com/article/header-element-overview/#container

I would highly recommend checking out the entire docs article.

[Mark]

Leo,

It is better now, but I still haven’t managed to get the page to fit on one screen. I feel like I am just using trial and error with the padding. To make the page have a smaller height, does padding affect it in any way, or do I need to decrease the height of the image to make the page height shrink?

Mark

[Leo]

Height of the image doesn’t matter.

The height of the page hero is controlled by the padding as mentioned in the article.

Not exactly sure what you are trying to create but try adding 344px to this option:
https://docs.generatepress.com/article/header-element-overview/#offset-site-header-height

Let me know if this helps 🙂

[Mark]

I just want the page to fit on one screen, so I am trying to limit the height of the page so that (including the footer) everything fits on one screen.

As far as padding options to, I have Read the article, but am still confused:

The text in the article reads:

“Add padding to the page hero content.
The height of the page hero is determined by the top and bottom padding.”

1. When the refers to “content,” is it just referring to the text overlay content?

2. Does the padding only set the size of the page hero image, and therefore the page height is not affected by the content (text in my case)?

[Leo]

so I am trying to limit the height of the page so that (including the footer) everything fits on one screen.

This is very difficult to do with your current set up as this will vary with each screen size.

1. It’s whatever content you’ve added inside the page hero content box.

2. Maybe this would help: https://www.screencast.com/t/KxVuPATibaT

[Mark]

OK,

Thanks.

Mark

[Leo]

No problem 🙂

Let me know if you need more info.

[Author]

Posts