Cornerstone Full width/ height (full Screen) custom CSS not working properly

[Liegeois]

Hi everyone,

I have been trying to set up a full screen starting page with Cornerstone, but things turned out to be a lot harder than expected…

I intended to set the different section to Full screen by using the dedicated custom css styling section within Cornerstone.

Nevertheless, when using the following:

height: 100%;
width: 100%;

or

height: 100vw;
width: 100vw;

things don’t turn out the way they are supposed to…

When using the %, nothing happens at all, and when using the “vw” value, the section out-scales the screen remarkably.

To ensure this was not due to any plugin, I have also temporaliy disabled every single active plugin on my page, with no success…

Any help is more than welcome.

[christopher]

Hi there,

A responsive Full Screen layout is not an easy thing to achieve and mostly is not possible with CSS. You can somehow achieve the functionality by adding the code below to the section in question:

width: 100%; height: 100vh; overflow: hidden;

But the best result is with Javascript coding and that is something which goes beyond our support scope.

Alternatively, you can use the Revolution Slider and have a Revolution Slider slide for each section. To make the slide full screen check this article:

https://theme-fusion.com/knowledgebase/how-to-make-a-full-screen-revolution-slider/

Thank you.

[Liegeois]

Hi Chris,

Thank you, that will do the job. I’ve mistakenly used vw instead of vh which was the reason I didn’t get it to work as intended.

Also for other people who might be trying to achieve something similar, check out the following link with further explanations:

100% height minus header?

Hope this can help someone out there.

Best.

[ruenel]

You’re welcome.
Glad we were able to help.