Making full-height intro sections is awesome. And it’s easy! Many of the demos of X Theme take advantage of full-height sections but they never really explain how. If you’ve searched their forums, you’ll find that they used Revolution Slider to do it, but honestly that’s not nearly as good of a solution as what we’re going to do!
You’re probably wondering how, right? Well:
What we’re going to do is take advantage of a little-known unit of measurement in CSS called viewport units. These little guys can actually size any element based on the height or width of the browser window, regardless of their parent element or anything else.
Really, all you need to do is add the following CSS to your section’s “Style” within Cornerstone:
1 |
height:100vh; |
That tells the browser to render this section to 100% of the viewport height! It’s so easy! That’s all there is to it. You could consider setting it to something slightly smaller as well, say 90vh, to accommodate the header, but that’s up to you!
This method would also work in any other application as well; it’s not limited to X Theme or Cornerstone. Just apply that code and you’re set!
Here’s my video tutorial showing it in action:
Are there any limitations?
Great question! The short answer is, in my opinion, ‘not really!’ It is a newer CSS unit, but even so, in the US it enjoys more than 95% support across all web users. And for me, that’s more than good enough. If someone is bumping around the web with IE 6 I’m pretty sure they are used to websites not working properly.
So go out, be free! Use these units to your heart’s content. Feel free to share what you’ve done with this in the comments!
6 Comments on “Making Section Full Height in X Theme”
Thank you! saved my bacon
This is rad. Any idea how to get the Header to do it?
My developer does it all the time! I’ll have to ask her and put together a tutorial about that specifically. We use “Pro” for that generally.
Jevus Chris!
It worked!
Why is this not on X theme or Cornerstone?
Rhetorical.
Thanks Bro! Word Well.
How do you vertically center the interior elements after?
I’ve been looking everywhere for this simple solution… reading forum after forum. Thank you!