Creating a section the fills the viewport

[detailsguy]

Hi there,

I’m trying to create a section that fills the viewport for a landing page and I’ve added:

$el {
height: 100vh;
}

To the section but it ends up cutting off the bottom part of the content once the window becomes too big. Url for the site is: http://www.dandelionsblooming.dreamhosters.com/sample-page/

Could you explain how to create a section that fills the viewport but shrinks the contents inside of it to fit rather than cutting off the content when it becomes too large?

It looks like the image size is currently what is causing the lower buttons and arrow to overflow the container…

Screenshot attached in case it helps.

Thanks!

[christian]

Hey @BodhiJames,

You already have achieved the filling of the viewport height. The problem here is your content. Generally, filling the viewport is only good for 1 or 2 elements in a section because there is no automatic way to scale the contents down in Cornerstone. You will need to manually scale text using the Responsive Text feature or a custom font size like calc(4vw + 1em) (see https://youtu.be/SdQHpAgFumw)

Your setup has lots of elements and you will need to scale them down for each of the screen sizes because devices have different aspect ratios. That would be tricky. For example, HD desktop and laptop screens has an aspect ratio is 16:9. You need to fit your contents in that fixed rectangular space. Most tablets are 4:3 in aspect ratio. That’s close to a square. If you visualize, your layout need to change in different screen sizes.

If you also scale the elements down, you need to take into account the readability of text.

If you really wish to continue with the fullscreen setup, I recommend that you use Slider Revolution because it can automatically scale the layers down. Please watch the responsive tutorials at https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/

Thanks.

[detailsguy]

Okay, great info. I ended up just applying padding to the center column to control the size of the image that was pushing everything else in the container to overflow and given all the complexities you outlined, this seems like the better fix.

Thx.

[friech]

Hi BodhiJames,

That solution seems to work, but not really. Applying huge paddings with no reset for the responsive view will mess up your page in mobile.

Please minimize that padding and apply max-width on the image element instead.

Then use the Column’s Text Alignment option to position the image (left, right, or center)

Cheers!