Site logo

Archived topic

How can i create a 100% height section

21 replies · Started by infocus on September 4, 2015

Viewing posts 1–15 of 22

How can i create a section with full height, for example height:100% do not work.
The idea is that the first section has be use the full height depending of visitor resolutions

Use the Page Header add-on as the first section. It allows you to set full height/width, as it's the top element.

Sections can't really do that, as sections below the initial viewport wouldn't know what 100% height was.

Is perfect, i have not seen this, i recomend you this change: "Make background image full screen?" will changed "Make this Page Hedader full screen?", because i have not used any image and i did not understand

I need to change the text on that/the layout of the Page Header metabox. It will make the entire area 100% height, you don't actually need to add an image to achieve the effect :)

Hello Tom,
i found other problem around this plugin (Header Page), if you see the website in a movil phone, the height of the website do not see good, i have used an android movil with chrome web browser.

The height of the page header should set to the height of your initial screen on your mobile phone.

What about it doesn't look good? The background image?

I not use an image, only a solid color, the problem is after that you use the finger and you move the website to down, then the height pixel automaticaly change, you have android? maybe in iphone is the same, check This link.

Additionaly, you can reproduce the same problem of the movil on the browser of your PC, press maximizer/minimizer buttom in the browser, now you can see the problem, but in the movil is when you use the finger for move down the page.

Interesting - I see the issue.

Let me know look into this - I'll find a fix and report back.

Thanks!

Thank you, i will wait the solución.

I believe I have this fixed.

If you'd like to test it out before I release, send me an email to support@generatepress.com.

Thanks!

This issue was fixed in a previous version.

Thanks for reporting!

Why not simply add "fullscreen-enabled" to the section class?
It works perfectly on my end. Here is an example. I like the fact that the section has nicer editing options than the page header add-on.

Ha, sneaky! Nice trick :)

Hi Tom,

is it possible to use the page header with a screen full-height but i use an boxed layout with 1400px widht and like to show the page header with: height 100% of actual screen and max width 1400px?

also I think it would be nice, if you could build in a little feature:
If a user take the page header to fullscreen he can set the navigation to transparent. thats nice. but if a user use the sticky navigation it would be a nice option to hide the main navigation if the page is not scrolled down. work with this: .inside-header { display: none; } the navigation is hidden, after scolling the sticky navigation is shown :)

thanks and regards
patrick

This archived topic is closed to new replies.