Vertical Center

Support
#1

Hello! I am trying to vertically align my row to the section, I used the class vertical-center in the row customizer, and it doesn’t seem to be working. Any ideas?

#2

Hello Emily,

Thanks for writing in!

In your row settings, please enable the marginless column option.

In your column settings, find the “Customize” tab and insert this inline element css:

$el {
  vertical-align: middle;
}

If this does not help, please provide us the url of the page in question so that we can inspect it.

Regards.

#3

http://box5756.temp.domains/~emduffyc/connect/

is the temporary site, but how do i give you the login credentials privately?

#4

Hey Emily,

You can insert the credentials in a secure note in your next reply.
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

#6

Did that work??

#7

Hey Emily,

I have logged in already. It turns out that you have added an inline element css to the section settings. I went ahead and removed it. In the column settings, I added this inline element css:

.x-section .x-container.marginless-columns $el {
  height: 100vh;
  vertical-align: middle;
}

Please check it now.

#8

Thank you! I see that the welcome page is vertically aligned…but now I want all of the sections to be…

#9

Hello Emily,

If you want to apply it in all of the sections, then please edit the page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-section .x-container.marginless-columns .x-column {
  height: 100vh;
  vertical-align: middle;
}

Please remember that in all of the row settings in each sections, you must enable the marginless column option so that the code will work.

We would loved to know if this has work for you. Thank you.

#10

I mean, it works…but I need some sections to be 100vh, and others to 50vh, and some 30vh.

#11

Hello Emily,

If that is the case, then you will need to add the inline element css in each of the column settings for each respective section. And may I remind you that you need to remove the inline element css of the section as well.

Hope this make sense.

#12

when i add the css to the customizer for the column, it updates ALL of them…

#13

when i add this

/* vertical center */
.x-section .x-container.marginless-columns .x-column {
height: 50vh;
vertical-align: middle;
}

to the sections that need to be 50vh, nothing changes.

#14

Hi Emily,

In that case, please remove the height: 50vh; property in the CSS code given by Ruenel.

Since you need a different height on these columns, please add the following custom CSS directly on the Column’s Element CSS area.

$el.x-column {
	height: 50vh;
}

You need to add this on every columns that needs a specific height.

Hope it helps,
Cheers!

#15

So it appears to work when i am in cornerstone, but not when i view my wordpress page. Any suggestions?

#16

Actually, I think that was a glitch.

Now, I have a row with three columns…I want the row to be vertically aligned to the center of the section, but I also want the columns to be aligned to the top of the row…any suggestions?

#17

Also, it jumps to the top again on smaller screens…

#18

Hi Emily,

Ok, let’s have a different approach, let’s use Flexbox, please remove all the custom CSS previously given.

You said on your first post that you have vertical-center class on your ROWs, let’s use that CLASS, please add this to Page > CSS or Theme Options > CSS if you’re planning to use this CLASS on other pages.

.vertical-center {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

Now this will vertically center the content of your ROW. Next, you need to add the height of your ROW, you can use the ROW’s Inline CSS field for adding this min-height: calc(100vh - $$px); where $$px is the height of your header.



Make sure you remove the default padding that is on the section because that will add to the height, and also remove any top margin on your elements. Add height to your column as well if you want those columns to have an independent height in mobile view.

Your site is unreachable at the moment please check.

Thanks,

#19

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