Section Height and Middle Content

Support
#1

Hello,

I feel that this question might have been answered before but I can’t seem to find them.

I want to create 2 fixed height sections globally – 1000px and 750px.
That way all my sections are either 1000px or 750 px.

Thereafter, I need all the content to align middle.

Thank you

#2

Hi Timothy,

Thank you for writing in, please inspect your ROW and turn on the Marginless Columns option.



Then add this to your Section’s Element CSS area.

$el .x-container {
  min-height: 1000px;
}
$el .x-container .x-column {
  vertical-align: middle !important;
}

Hope it helps,
Cheers!

#3

Thank you for this.

It wells too well. now every row within the element is at min-height

#4

Hi Timothy,

Sorry about that, I did not expect you have nested ROWs. Please disregard the advice above, remove the custom CSS and turn OFF the Marginless Columns.

Lets have a different approach, please add this to Theme Options > CSS

@media (min-width: 768px) {
		.flexbox {
		min-height: 1000px;
		display: flex !important;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
}

Then apply the CLASS flexbox to the Section that you want to have the min-height and vertical center rows.



Hope it helps,
Cheers!

#5

Amazing. Thank you so much.

#6

You’re most welcome, Timothy.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.