[Support request] extra white space on the sides and bottom of my website pages

[Mark]

I have created a GP site at Quin-wezeman.online.

It seems that on some pages, there is a lot of white space on the sides and at the bottom. (for example on the “Contact” page)

Can I eliminate this through the customizer, or do I need CSS?

Thanks

Mark

[David]

Hi there,

to remove the white space from the sides of the page, you cans set the Customizer > Colors > Body –> Background to match your content background color.

For the space below the footer this will occur when you have pages with short content. Theres a few ways to fix that. One would be this CSS:

#page {
    min-height: calc( 100vh - 122px );
}

It will set the height of the page content too 100vh ( thats 100% of the viewport height ) minus 122px which is the height of your header/nav + the footer bar.

[Mark]

David,

That CSS works perfectly on all of the top level pages in the menu.

However, if I click the button for “Vocal Performances” or the button for “Theater Performances” on the home page, I am taken to a page that still has the white area. Is there different CSS needed to target these pages?

Thanks

Mark

[Mark]

David,

Please discard my last comment. I figured out the problem.

Mark

[David]

Glad to hear that!

[Author]

Posts