How to Reduce Footer Height in WordPress: Step-by-Step Guide

Quadir Hours Updated on

As the header of a website, the footer is important too. In fact, in the basic structure of a website, we give maximum weightage to only 3 elements, i.e. header, body, and the footer. isn’t it?

Footer is so common in websites; people often scroll down to the bottom to look for important pages, like privacy policy, terms, and conditions, GDPR, contact, about us, etc.

For now, the question is how to reduce footer height in WordPress. Many themes have an awkwardly large primary footer size and the secondary footer at the extreme bottom.

HOW TO DECREASE FOOTER HEIGHT IN ANY WORDPRESS THEME

Here, you’ll learn four things:

  1. How to reduce footer height in WordPress
  2. How to hide primary footer in WordPress
  3. How to reduce footer copyright section height in WordPress
  4. How to hide footer copyright section height in WordPress

Reduce Footer Height Using Theme options

If you have premium themes like NewsPaper, Astra Pro or Flatsome, then it’s super easy to increase/decrease/hide footer and its elements using inbuild frontend customizer or WordPress customizer settings.

But for the one who is still using a free version of a theme or a theme with little to no frontend customization options, this article is for you.

Reduce Footer Height Using Custom CSS

Tools you’ll need to do this

  1. Google chrome, we all know it has the best developer tools and a vast number of addon/extensions.
  2. A Google chrome extension ‘Stylebot‘; very simple CSS editor plugin for everyone.

Note

1. This method modifies and overwrite your website CSS, and works for any theme, either premium or free.

2. We strongly advise you to go for premium high-quality clean code themes like Astra, Generate Press, and Neve. Nulled themes have malware, bots, viruses, and are highly vulnerable to website hack, destroying all your hard work in a few minutes.

Alright, let’s start with:

1. Login to your WordPress website and navigate to appearance>customize.

2. You’re inside WordPress customizer settings, right? Click on ‘Additional CSS’.

3. Now, open your website in another tab, open Stylebot extension, and click on the arrow at the top left of the Stylebot panel.

4. Once the element selector is activated, it turns blue; hover over your mouse and select the footer area.

5. Now, on the Stylebot panel, scroll down to the ‘layout’ section and the ‘box model’

6. Change the top and bottom ‘padding’ size, start with 5, and increase/decrease according to your need.

7. You can also ‘hide’ the footer, just click the hide button above the box model.

8. In the last step, click on the ‘<code>’ in the Stylebot panel and paste in the ‘Additional CSS’ section.

Note: If there are already CSS codes in the Additional CSS section, leave them as it is, paste the new code just below them.

In the same way, you can increase, decrease height or hide the footer copyright section easily.

Play with the Stylebot extension, there are lots of design customization you can do with this amazing chrome extension.

If you need any further help with the increase and decrease in footer height; contact us anytime, we are open to help 🙂

These articles might help you or your friend:

How to fix 500 internal server error in WordPress: Complete Guide

How to increase PHP memory limit in WordPress

Similar Posts