How to center an element horizontally and vertically... and fit all browsers/screens

[JacobNFerguson]

Hi, I’m struggling to do a very simple thing and I’m sure there is a simple answer. I am creating a funny custom 404 page that is very simple. One full-screen section, black background, type text element in the center (horizontal and vertical). I want the text to be right in the center of the screen when people visit it from all different browsers and screen sizes. The problem is I really can’t figure out how to do this. I’ve tried padding, I’ve tried adding some custom css. I searched the forums and found this guy equally as frustrated with no answer given: https://theme.co/apex/forums/topic/cornerstone-aligning-center/

There must be a simple way to do this, right? I mean there is no more simple page building action then this, how to put something in the center of the screen. What am I not getting here?

Thanks!

[friech]

Hi There,

Thank you for writing in, please add this to the page custom CSS or Theme Options > CSS.

.vertically-center {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

Then apply the class vertically-center to the Section, lastly set the Text Type’s text alignment option to center, to center it horizontally.

Hope it helps,
Cheers!

[JacobNFerguson]

Hi, I’m sorry but I can’t get that to work. I added the custom CSS to page and then added “vertically-center” to section class. I even tried adding it to column class and the element’s class. Nothing is working. It did however center the element horizontally without me even having to select that option, but that I already know how to do.

I’ve included url/user/pass so you can take a look. It’s page 404. Thanks.

[JacobNFerguson]

Actually, I found the answer! I had to add height:100vh; to Inline CSS under Section>Customize. For anyone else looking for this answer (I’ve seen a lot of people in the forums trying to figure out how to make full screen - full height and width - pages without using Rev Slider)… that is the code you want to add. See this link as well: https://pagecrafter.com/making-section-full-height-x-theme/

I’ve been looking pretty hard for this, it seems like such a simple thing but for whatever reason the answer was hard to find.

I do have one question for the support guys though… that code and the code friech gave me above makes everything work almost perfect, but I don’t understand why there is a slight scroll (bar) on the page now. It looks likes the full height aspect is slightly larger than the screen size… otherwise there would be no reason to scroll. I know the codes are working though because I am resizing my browser window and it is responding accordingly… keeping the section full screen (but with a scroll bar and a slight need to scroll.)

I’ve removed all padding, so that’s not it I don’t think.

Thanks for the help,

Jake

[Joao]

Hi Jake,

Seems the reason is the Wordpress Top Admin Bar.

Please turn off the page protection from bluehost so you can test without being logged in,

Let us know how it goes.

***Tip…use min-height: 100vh; instead of height: 100vh; …sometimes the content sits well on 100vh on desktop but it is longer on mobile, so if the content gets longer than 100vh it wont leak out of the section because the section will expand beyond 100vh if necessary.

Hope it makes sense.

Thanks!

[JacobNFerguson]

Check, and check. Awesome!

Man you guys really have great support. Thank you so much.

[nabeel]

Glad we could help and thank you for your nice words.

Cheers!