12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Jan 21, 2022

Section with 100vh min-height in Oxygen

Sridhar Katakam

Looking to have a horizontally and vertically centered div inside a Section that has min-height: 100vh in Oxygen?

Here’s how.

Add a Section.
Align Items: center
Justify Content: center

Add a Div inside the Section having your desired content – say a Heading and Text component.

The key is to set min-height: inherit to the section’s inner wrap. This can be done either at Manage > Stylesheets or Manage > Selectors.

Go to Manage > Selectors and add a new selector like this:

#section-2-64 > .ct-section-inner-wrap

where section-2-64 is the ID of your Section.

If you are going to have multiple Sections with 100vh min-height, you might want to set up a class and use it instead of the ID.

Advanced > Min-height: Set it to none and type inherit.

via Udoro.