How to remove the blank space between header & footer from a static homepage?

  • Resolved superdue

    (@superdue)


    10 years, 7 months ago

    Hi all,

    First of all, thanks because most of the queries I have gathered while building my site have got resolved by reading this huge support forum.

    My query now is: how to remove the blank space between header and footer (which contains the post box as well) from my static home page.. This way, I would see: the blog title, the menu, the header image and the footer. I would even see with good eyes still have a bit of blank between the header and the footer; but now this is too big and I dislike it.

    I have designed it in a way that the menu redirects you to other pages and without any post I will fill the content in each page, that is why I want no blank space in my homepage.

    I have tried different css codes and also some plugins pointlessly or even modify the page.php which took away this space and the footer not only from the homepage, but from all other pages which is not wanted, so I reverted it of course. Last thing I read is that in the dashboard at the top right, there is the screen options which should have several options and that unchecking “discussion” this comes true. Funny part is that in my theme, I don′t see this option, but other basic staff and only 4 items listed.

    WP 3.9
    Theme: Match
    URL https://www.kataedu.com

    P.S.: I do css changes in my child theme as I read it is recommended.

    Thanks a lot as this is the website to inform our guests for our wedding ??
    Edu

Viewing 2 replies - 1 through 2 (of 2 total)

  • I checked out https://kataedu.com/ and I can see that the space between the main image on the home page and the purple footer is coming from a few different things including an empty content area as well as padding on the content container elements as well as the footer.

    There are two options for modifying the home page design. One would be to adjust the php template itself in a child theme, but the other would be to simply add CSS (also to the child theme) to work around the issue just for the home page.

    Here is an example that I came up with based on the current https://kataedu.com/ home page:

    .home #content > .container {
	border: 1px dashed red;
	display: none;
}
.home .site-header {
	border-bottom: none;
}
.home .site-content {
	padding: 0;

}
BODY.home DIV DIV.site-content FOOTER.site-footer DIV.site-info {
	top: 0 !important;
}

    Starting each CSS selector with “.home” means it will be limited to only the home page which uses “home” as a body class.

    The !important modifier is usually best to avoid, but it’s needed in this case to override some other CSS currently in use on your site:

    BODY DIV DIV.site-content FOOTER.site-footer DIV.site-info {
top: 48px !important;
left: 0px !important;
position: relative !important;
}

    If you got rid of that very specific CSS, then you could eliminate the !important modifier from my example above.

    I also removed the small white border from the bottom of the main image. You can add that back if you’d like.

    Looks like you have a great start!

    Thread Starter superdue

    (@superdue)

    Wow -Amazing!!! Thanks a billion Sheri!!! your css code works out like a charm!!! Thanks again ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to remove the blank space between header & footer from a static homepage?’ is closed to new replies.