Sheri Bigelow (designsimply) on "How to remove the blank space between header & footer from a static homepage?"

I checked out http://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 http://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!