Creating full height sections that are vertically centered in Pro

[justinlosh]

I am trying to make a single page design. I want each section to be a page. Each page has its own parallax images so I want each section to be full height of the view port. So basically each section acts as a “page”. I want each section’s content to be vertically centered in the section. I have the following classes in my content CSS:

.x-section {
  height: 100vh;
  position: relative;
}
.x-container {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

The problem is that when I add those classes, the section disappears completely. Are there any other ways to achieve this?

[friech]

Hi There,

Thank you for writing in, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Please add this to Theme Options > CSS instead.

@media (min-width: 768px) {
	.flex-center-center {
	min-height: calc(100vh - $$$px);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
}

If you notice there is a variable there ( $$$px), that should be the total height of the header and section/row top and bottom margins.

A Complete Guide to Flexbox

Then apply the CLASS flex-center-center to the ROW.

Happy New Year,
Cheers!