How do I change the height size of my footer in my wordpress theme?

  • I know how to change the size of the text as I am still working with the text right now and was able to figure out how to change the size but I want to change the size of the footer itself so that it is smaller in height. How do I go about this? What coding do I need to change and what would I change it to? Here is a link to my site so far- https://creativeonlinegenius.com/

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

  • Hey Johnny!

    To just decrease the height of the footer you can use a little css ?? If you’re using a child theme (highly recommend it!) it can be added to your style.css, or if you’re using a custom css plugin it can be added in there ??

    Something like this would decrease the height by a bit:

    .site-footer {
max-height: 10em;
}

    Depending on how small you want it you may need to play around with some other properties, but your browser’s inspect tool (right click and ‘Inspect Element’) should help you out with finding what you’d like to change!

    Thread Starter johnnyr860

    (@johnnyr860)

    Hello there thank you for the response to my post. I just wanted to say that I tried your method but for some reason it did not work. If you go back the original site you can see that inserting the code has now caused 2 rectangles to show up at the bottom corners of my page. When I change the number in your code from 10 to something smaller the smaller the number the bigger the rectangles become.

    I am unsure why this would be happening. I tried inserting this into styles.css but that happened and then I deleted it and inserted it into the CSS editor plugin I have and it still did the same thing. The footer itself however has not changed size using the code that you gave me. I tried to make the number bigger then 10 but nothing happened either.

    Changing it to a number larger than 10 wouldn’t do anything because it would be giving it more space than the content needs; but as for the rest I’m sure we can figure it out!

    It looks like your code has been added in at the top of your style.css (not sure if that was done manually or by the plugin you mentioned), adding it to the bottom of that file might clear that up!

    Thread Starter johnnyr860

    (@johnnyr860)

    Sorry unfortunately this still did not resolve the problem. I went back to style.css as you suggested and put the code in the bottom of all the other code and it still did not seem to resolve the problem. I changed the number 10 to 5 in the code to see what would happen and all it did was make the 2 boxes on the bottom bigger in size. If I leave the size at 10 as was written in the original code it just goes back to 2 small rectangles in the corner of each.

    Could you take a screenshot of what you’re seeing and post it to someplace like Imgur? I can’t see the rectangles you’re referring to.

    As a side note, I don’t think it’s related to your problem, but your HTML is a little screwy. A lot of things that normally go in your <head></head> section is actually at the top of your <body></body> section.

    Thread Starter johnnyr860

    (@johnnyr860)

    Yes here is the link https://www.flickr.com/photos/126659175@N02/14927074229/ if you notice on the footer I have my links at the bottom and it has the copyright info under the links. Yes well on that same footer as you will see there are 2 white boxes one to the left of the footer and one to the right of the footer. Those are the ones I am having problems with. Those 2 white boxes adjust in size depending on the number I change in the code that was given before.

    I’m not sure what you mean by things that go in the head section? I know I placed my banners code right above all the other code in the header.php section and somehow the banner shows up at the top of the page like I wanted.

    I don’t see those rectangles on Firefox 31 (Mac OS X Mavericks) at all. Hmm.

    What I meant by things that go in the <head></head> section are things like <meta charset="UTF-8"></meta> and <title>Creative Online Genius | Vernon Rockville, CT | Connecticut Graphic and Web design (860) 338-4583</title>. Typically, those tags are supposed to be in the <head></head> section and not the <body></body> section. Like I said before, I don’t think that’s the cause of your issues, though.

    Thread Starter johnnyr860

    (@johnnyr860)

    I see what you mean. I used firefox to work on my website but I use internet explorer to view the website so that I don’t have to keep logging out of my wordpress account to see the site in full view. But upon logging out in firefox and testing my site there you are right the rectangles do not show either way the footer is still the same size it was before. The code didn’t do anything to resize my footer other then adding 2 rectangles that were shown through internet explore.

    I will have to take a look at these tags that you refer to and make sure everything is in the proper place so I don’t have any future problems with anything else then.

    As a side note, if you deleted the code you initially added:

    .site-footer {
max-height: 10em;
}

    those rectangles would go away. But then you’d be right back where you started. I see what the issue is with shrinking the footer, but I’m not 100% sure how to proceed. Let me mull this over for a bit.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How do I change the height size of my footer in my wordpress theme?’ is closed to new replies.