[Support request] Full Screen Header

[Adam]

Hi there,

I am in the initial stages of a site using generate press. I want to have a different picture on each page below the navigation, and from what I can gather, the Elements function is the simplest way to achieve this.

I have made a new element, and got the picture I want on the home page – but I want it to be the full width of the page. I see there is a ‘full screen’ option but it makes no difference whatsoever even when I use the merge function. Should this be what the ‘full screen’ option is for?

How do I achieve this please? I have tried searching the forum but can’t find an answer!

Adam

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

so in your Header Element first make sure there is something in the Hero Content, you can use a HTML Comment if you just want to display the image e.g

<!-- Featured image -->

Without it the Header Element won’t display and what you’re seeing is the regular featured image.

In the Header Element settings make sure the Container is set to Full Width.
And you must apply some top and/or bottom padding to give it some height. Best thing to do is calculate your images aspect ratio ie. height divided by width. And add this as a % padding to just the top Padding (leave the rest as zero). This will ensure the image is displayed full size and remains responsive.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Adam]

Hi,

Thanks for your prompt reply!

I added the HTML comment, ensured full width (as well full screen) were set, calculated the ratio (as 39% i think?!) and added into the padding. Unfortunately it looks exactly the same as before! I want it to span the entire width of the screen if possible.

Any other ideas I could try?

[David]

Last thing on the list… did you set the Display Rules in the Header Element?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Adam]

Yes indeed, the display rules are set to display on the home page.

[Adam]

Ok it seems that it was still displaying the featured image, and not the Element as there appears to be a difference between my ‘Home’ page and ‘Front page’. Hopefully I can sort it from here!

[David]

Yes, use the Front Page display rule for the page that is assigned in your WP Reading > Settings

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts