Vertically align Section

Support
#1

Hi there!

I would like to align a section vertically so it’s in the middle of the screen.
I’m using a single section with two rows, each row with two columns and 4 cards elements devided over the rows/columns.

Using the blank container, header (on the left), no footer on renew stack.
X pro theme.

Any help is much appreciated!

Sincerely,
Xander Hartog

#2

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with the URL of the page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

I’m also not sure what you want to accomplish. Please provide more details and screenshots of what you want to achieve.

Thank you.

#3

Hi @xian, I’m also having issues with the vertical-align. I used to do this with my eyes closed, but know for some reason I feel like I need to learn again how to do it.
Check this page in desktop and mobile, and you will see what I mean. Also, in order for the rows to have the same height of the section, I have to set it manually!
http://loo.jump2web.com/

#4

Sorry indeed. I lacked more information to share :blush:
The URL that I’m testing on is entered in the secure note along with login details.
I currently tried some things with padding but that gives issues with mobile.

On the Section (sshot 2) I have in the style : “height: 100vh; vertical-align: middle;”
It would like center the two rows( headline and cards) in the middle of the page.

Required:

Currently setup:

#5

Hi @iamXnl

Please remove the height that you applied on the Section and ROWs

Then add a CLASS hv-center to your section.

Then add this Custom CSS on Theme Options > CSS

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

Clear your caches then view the page.

Flexbox is kind of a customize thing, follow this post if you need to learn more about flexbox.

Hope it helps,
Cheers!

1 Like
#6

Looking at the possibilities of flexbox I think I can get a long way in the direction how I want to arrange things! Thanks for pointing the direction :slight_smile:

edit: p.s. It worked for the centering though! which was the initial question.

#7

Glad to hear it,

Cheers!