Making Section Full Height in X Theme

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:

illshowyoujurassicpark

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:

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!

About Brian Johnson

Brian Johnson is a website developer and designer living in Lakeville, Minnesota with a passion for code and WordPress. He spends his days building WordPress websites for small businesses, developing new code with the online community, and living life.

Leave a Reply

Your email address will not be published. Required fields are marked *