How to vertically center a row within a section?

[thecashbag]

I have a section that displays the full height of the screen using the below CSS which is placed on the section:

$el {
  height: 100vh;
  max-height: 1080px;
} 

The page looks like this:

Now I have a few questions:

1. I want the row within that section to be vertically centred. How do I do that?

2. From memory, I thought I could turn flex-box on for Sections, which would solve all my problems. But now it seems that option is only available for Columns. Has that option been removed from Sections?

3. I also remember there was a special class we could use for these situations. Does that still exist and what is it?

P.S. I am developing on a Local machine, so I cannot give you login details or show you a live example of the site. Screenshots will have to suffice.

[ruenel]

Hello @thecashbag,

Thanks for writing in!

To get your issue resolved, please do the following:
1.) Remove your custom inline element CSS from your row settings.
2.) In your column settings, set the minimum height and the maximum height.

3.) Still in your column settings, enable the Flexbox and set the vertical alignment to the center.

Kindly let us know how it goes.

[thecashbag]

Thanks that works

Since I have set Min Height and Max Height on the first column (the one with the header text), should I also do the same with the second column? Or does the second column copy those settings from the first one?

[thecashbag]

Actually sorry on closer inspection it does not work because putting those settings on the Column (instead of the Section) caues the image to be displayed far away from the Headline text when viewed on mobile.

See here:

The image should be stacked up underneath the Headline text on mobile. It does get stacked, but because we set the first Column to have 100VH it gets pushed out of view.

If I could put these settings on the Section instead of the Column I wouldn’t have that problem, the Section would display as needed and the picture would stack directly below the Headline on mobile. But it seems like you have removed that option from Theme X.

[prakash_s]

Hello @thecashbag,

In order to help you with your concerns, we need to check your settings. I would request you please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact Page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[thecashbag]

I actually said in my opening post that I am developing on Local, and therefore cannot give you any login or live links.

But I have now set up a temporary staging site for you that should work.

Login details are in a secure message attached to this post.

[ruenel]

Hello @thecashbag,

You can also use responsive styling where only in larger screen size the minimum height will be applied. In smaller screens, you can set the minimum height to 0.

Hope this helps.

[thecashbag]

Thanks for the help.

But I have changed the design of the page to now use a Grid within the Section. Since the Grid does not have a column I can no longer use that solution.

Can you take another look at the updated page?

I need the top Section to be full height, and the Grid to be positioned in the middle of that Section.

The login details remain the same. They were added as a secure note to one of my previous posts.

[ruenel]

Hello @thecashbag,

The section element does not have a Flexbox option. You can insert a DIV element inside a one-column row and then nest another row inside the DIV element like this:

You can then set the minimum height of the DIV element to 100vh and also enable the flexbox so that you can position the row at the center. Adding a responsive styling, you can reset the minimum height of the DIV to 0 and vertically align the row to the top in smaller devices.

Please see the test page in the secure note.

Thanks.

[thecashbag]

Thanks again!

I actually tried recreating the whole section from scratch, and for some reason this time it did use a Column. So it now has a Grid inside a Column inside a Section.

So I applied your original solution and it works a treat

[friech]

Hello @thecashbag,

Glad we could help, yes it’s possible to have a ROW/Column or Grid/Cell in the section. If you hold the cmd or ctrl key while clicking the + on the section, you’ll see the options.

Cheers!