Remove Grey Bar and Whitespace from Footer

Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.

Last Reviewed: 22-Apr-15 (3.3.20) 3.1.* 3.2.* 3.3.*

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.


Related Snippets you may also like

6 thoughts on “Remove Grey Bar and Whitespace from Footer

  • zebajabeen

    A space is covering in the middle of the webpage bottom and Adsense, how can remove that, please let me know very fast… I am just not able to understand how to remove this space..

  • Aryan ebert

    HI Dave, Am trying to remove the nav bar gray box with shadow without my menu list. So is there any easy way i can do the using CSS.

  • chappie

    Thanks for this, Dave. It almost fixes a problem for me. On my full-width Home page, I have nothing between the FP captions and the footer so I’ve been wanting to remove the bottom featurette-divider and close up the white space.

    Unfortunately, the Snippet I found to hide the divider line also hides the vertical dividers on on other pages which have sidebars and I want to keep those.

    Your “reduce whitespace” Snippet looked like the solution as I could cover the home page divider by setting a bottom margin of -40px. This makes the Home page perfect for me. But it messes up all my sidebar pages as they don’t have the same lower horizontal divider nor the same bottom margins. On those pages my -40px margin-bottom brings the footer up to obscure some of my body text.

    I can get around this by adding a couple of empty paragraphs at the end of my body text (I know there must be a better way to add space) but it’s a bit clunky and laborious.

    So, in short, can I limit your “reduce whitespace” code so that it applies only to my Home page?

    Thanks for your help.

    • Dave Bardell Post author

      Easy! Make it .home #main-wrapper{}.

      You could also limit to:
      Posts, using .blog #main-wrapper{}
      Pages, using .page #main-wrapper{}
      Specific Page, using .page-id-n #main-wrapper{} (you need to determine the unique page id).

Comments are closed.