Tesseract – How do I change height of footer

You don’t want to modify any of the PHP files. What you want could probably be done using CSS. If Tesseract has a custom CSS option, you can add CSS rules that way. Otherwise, you’ll want to either create a child theme, or use a CSS plugin like Jetpack or Custom CSS Manager. If you provide a link to your site, we can offer more concrete suggestions.

Hi, thanks for the quick reply mate. I have a style sheet with the following on:
/* =23. Footer
————————————————————– */

.site-footer {
background-color: #fff;
color: #afafaf;
font-size: 14px;
text-align: center;
vertical-align: middle;
}

.site-footer a {
color: #afafaf;
}

.site-info {
padding: 10px 0;
margin-top: 10px;
border-top: #eee solid 1px;
}

#colophon ul {
list-style-type: none;
padding-left: 0;
list-style-position: inside;
}

#sidebar-footer {
text-align: left;
word-spacing: -0.29em;
}

/* === Footer Menu === */

.footer-menu {
display: inline-block;
float: left;
margin: 0 0 10px;
}

.footer-menu ul {
float: left;
list-style: outside none none;
margin: 0;
padding: 0;
}

.footer-menu ul li{
display:inline-block;
padding-right: 10px;
}

I can’t see where it mentions height or am I missing something? cheers and thanks

Usually the height of the footer is going to be dependent upon the elements contained within, i.e., it’s not going to be a fixed height, but will grow according to how much space is needed for the contained elements. There will probably be top & bottom margins for those contained elements that contribute to the height. That’s why I asked for a link to your site. If I examine it with Chrome DevTools, I could tell you exactly what contributes to the height.

Hi, my site isn’t up on the net yet, it is contained within my hosting company in CPanel. I will check the margins though contained in the Style Sheet. Thanks & regards

Tried altering the margins but no difference.

Based on this demo page, you can try changing the height using this rule:

#colophon {
   padding: 40px 0;
}

The padding property is how much empty space to leave around the inside edges of the element. Right now, a padding of 40px for the first value means to leave 40px of empty space at the top and 40px of empty space at the bottom. Try adding this rule via child theme or plugin (or your theme’s custom CSS option) and changing the first value.

Thank you so much my friend but nothing seems to change it so I was wondering, if I did away with the ‘FOOTER .PHP’ altogether would this get rid of the footer and I could always keep a copy for a later day.
It’s doing my head in lol.
Thanks again for your input, much appreciated.

Getting rid of footer.php would definitely not be a good idea. So you are trying to get rid of the footer? When you said you wanted to change the height, I thought you might be trying to expand it. Try this CSS:

#colophon {
   display: none;
}

Hi mate, I wanted to reduce the size but nothing seems to work so I thought about getting rid. I will keep it and look at it agian once I get a bit more used to working with WP. Cheers

I wanted as well, to change the height of the footer as it was a bit high/tall for me. So this is what worked for me :

– I have installed the plugin Simple Custom CSS
– then I have put this code in

#colophon {
	padding: 1px 0;
	margin-top: 0px;
	border-top: none;
	}

The number after paddign is responsible for the height of the footer. Hope this helped.

P.S. : I did these changes on the CHILD THEME

Thanks for that zholy9 – much appreciated.

Hello Zholy9, I copied your code in my Custom CSS and it didn’t work. Is it possible for you to look at my website to see what is missing? My website is Luv4Sports.com. Thanks.

I THINK (might be wrong) that it’s the LOGO in your footer, that is “blocking” making the footer smaller. I THINK the footer is adjusting to the logo.

You might try to make it even smaller (or temp-remove it) to see if that helps.

From the quick glance under INSPECT ELEMENT in the chrome browser, I can see your padding being set to “1px” (instead of original 40px).

P.S. : as a user/visitor of your site … I had trouble to scroll down, because of the pictures you have there. Once I started to scroll and the mouse cursor stopped on the picture, it was rolling only the pics instead of the page. I had to use the scroll tab in order to get to the bottom. Is that how you want it ? Just asking.

The problem is that when the document (window) is first displayed, there is some Javascript that executes that sets an inline style for the content area’s height. I don’t know what elements the script uses to calculate the height, but it’s definitely not accurate, it’s much too short. That’s why the footer extends upwards, it starts where the content area leaves off.

You can override the inline style by adding this to your custom CSS:

#content {
   height: auto !important;
}