Pro Theme Full Page Option

[cyberando]

Looking for a way to force a page to fill the page top to bottom. Not having any luck.

Pro theme - latest version. Example page: https://www.galenafoundation.org/thank-you. Would like page to take up full screen, not just 1/2 page.

Also, latest update seems to have made all the menus dark and hard to read - should start a new post, but are we stuck with this, or is there a toggle to get back to normal?

[scotbaston]

Try setting the minimum height of the column to 100vh

[cyberando]

Setting it at 100 vh made the content area take up the height of the page; setting it to 79.5 (through trial and error) left room for the header and footer.

Thank you!!!

[scotbaston]

do you know the fixed heights of your header and footer?

looking at your link it looks to be 6em for the header and 4.5 em for the footer

instead of 79.5vh try the following

calc(100vh - 10.5em)

that way it should fit 100% all the time (currently when I view the 79.5vh version on a 27" monitor, it doesn’t reach the bottom)

[prakash_s]

Hello @cyberando,

Thanks for writing to us.

I checked you given page URL since your page content is less just because of that the page height is looking small on large screens. I would suggest you add a custom class in the section and then add this custom CSS under Pro—>Theme option —>CSS

.x-section.section-height {
height: 100vh;
}

Please feel free to change the class name. Please make sure if you change the class name you need to change the class name in the code as well.

I checked your site’s menu it seems that the menu is working fine. It might me cache issue at your end I would suggest you clear your browser and then check it again. Please have a look at the given screenshot below.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks