Modifying padding of page elements without displacing footer

Hi there, I’m trying to shrink the padding of a number of (non-homepage) page elements in Shapely and every time I do so, the footer ends up popping up into the middle of the page. Here’s the CSS I’m currently using. It makes the page look like I want, but the footer is detached from the bottom:

.page-title-section {
	height: 65px;

.page-title {
	color: #fff;
	text-shadow: 1.5px 1px #000;

footer#colophon {
	padding: 0;

footer.entry-footer {
	padding: 0px 0 !important;

section.content-area {
	padding-top: 15px;
	padding-bottom: 5px;
.entry-title {
	display: none;

.entry-content h1 {
	color: #b3b3b3;

you can see the example at

What can I do to shrink these various elements’ padding but keep the footer attached to the bottom of the page?


Somewhat sheepishly, I realize that shrinking the various elements has caused the page content to be shorter than the window so the footer is behaving as designed. I’ll see if there’s a way to stick the footer to the bottom if the page content is shorter than the window size.

Figured it out thanks to this thread: