Full height section adjustable to screen size

[j300bac]

Hello,

I was wondering if there was a setting to force each section to full height?

I have looked through the forum but can’t find anything on here that doesn’t involve revolution slider which I want to avoid in this case for optimisation purposes.

The first “section” of this demo site below adjusts 100% screen height according to the screen size -

https://www.portotheme.com/wordpress/porto/corporate14/

Can this be achieved with Pro?

I have listed the staging site in question on a private note although I’m guessing you don’t need it to show the setting

[friech]

Hi J,

Thank you for writing in, you can use the Viewport Units to have your section the full screen height.

To do that, you can add this to your Section’s Element CSS area.

$el {
	min-height: 100vh;
}

Hope it helps,
Cheers!

[j300bac]

@friech

$el {
min-height: 100vh;
}

Hi Friech,

This worked tremendously - thank you very much. Absolute game changer.

I don’t suppose there’s a way in the standard settings to ensure the column and it’s elements always stay in the center of the page when using this full screen method?

I’ve tried using % on margins but they always over push across devices so far.

[mldarshana]

Hi There @j300bac

There’s no inbuilt functionality currently. You can learn more about CSS flexbox here (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and implement it accordingly.

Also here’s another example (https://theme.co/apex/forum/t/vertically-center-a-row-within-a-section/39196/2?u=mldarshana).

Hope that helps.
Thanks!

[j300bac]

That worked tremendously - many thanks to you both.

[thai]

You’re welcome.