Pro Cornerstone - Center Element on Full Page

[clovisd]

Hello there,

I’m currently trying to center a Section on a page without Containers, Headers, or Footers and have it be in the center and always at 100% of the Monitor / Display size.

I’ve tried various spacing settings and % for vh, vw, vmin, vmax, etc but havn’t been able to achieve the desired effect.

I also have a background that I’m trying to get expanded to fit and cover the entire background of the page regardless of screen size.

Would appreciate any help!

Thank you,
C

[christian]

Hey C,

It looks like your section is already centered. The use of Spacing options is not the way to go if you want to center though auto side margins will work in some situations. The most efficient way is to use the Flex options. You can learn that here https://theme.co/docs/use-flex-layout

[clovisd]

I’ve taken a look at the Flexbox docs but this doesn’t seem to be relevant to the page setup / way things are currently setup on my page as they are specific to custom Headers or Footers? Unless I’m misunderstanding, I can’t find any flexbox options either directly in the Pro editor for any of the Containers, Rows, or elements for the current page.

Maybe I’m misunderstanding the FlexBox and docs but based on the Docs page, the idea is what I’m looking for but not as a website header: "Flex Layout defines how the children inside the bar "?

Your example image above has a white edge towards the bottom, this is exactly what I’m trying to avoid. This is further exemplified on bigger displays:

I’m trying to have the gradient background expanded and fit s it covers the entire page and the Logo + Button / links (in a single section) centered on that page based on the screen display.

The goal in this case is to have a single page with no scrolling, a logo + background, and a bunch of links always centered and displayed correctly. I know this would be achievable with a Slider plugin like Revolution slider but I can’t concieve how this isn’t possible with Pro / Cornerstone.

Appreciate the help,
C

Edit: There is a spelling mistake at the very end of the FlexBox doc:

You’ve just learned the basics of how to use Flexbox and create complex container strucutres.

[ruenel]

Hello @clovisd,

Assuming that your page content does not have the header or footer, you can center all the elements on a Full Page by following these steps:
1.) Set up a section, row, column like this structure:

2.) Your section should not have any top or bottom padding:

3.) You will have to add all your elements inside the 1 column only:

3.) You must set a minimum height of 100vh in your column settings.

4.) You must also enable the Flexbox option in the column settings and position to the center both vertical and horizontal.

Hope this makes sense.

[clovisd]

Hey @ruenel,

This is almost perfect! Thank you, I’d never seen the FlexBox option before / gotten it to show up for non headers / footers.

However, I seem to have one last issue, I’ve attached an Image example.

• The scrollbar appears on the page
• White bar at the bottom

I tried using an Incognito browser without the Wordpress Login bar etc and no luck.

Thanks for your help thus far!
C

[tristup]

Hi @clovisd,

It seems that you have set the overflow option to visible for the Section. I went ahead and set it to the hidden* and the scrollbar is not showing anymore.

Thanks

[clovisd]

Perfect! Thank you for all your help.

I missed / didn’t see the Overflow option so good catch.

This is perfect.

[tristup]

Hi @clovisd,

Glad that we are able to help you.

Thanks