Support » Themes and Templates » TwentyEleven: How to reduce whitespace below menu and Page Title

  • Resolved christdp


    I’m a WordPress newbie and am trying to reduce the empty white space below the twentyeleven menu and the Page title and other content.
    Here is the space I’m trying to describe.

    Here’s the site I’m beginning to create.

    A few things I’ve already modified in my twenty eleven child theme include:

    • Removing the default twenty eleven header images and uploading and using a custom header image in place of the Site title text.
      I did this by modifying child theme file functions.php using these techniques.
    • Resizing the header image using the Resize Twenty Eleven Header plugin.

    I have searched all the forum posts on and tried several of the techniques to add css to the style.css file in my 2011 child theme but I am unable to reduce the vertical white space.

    Any suggestions or help would be much appreciated. Thanks for your consideration.

Viewing 15 replies - 1 through 15 (of 19 total)
  • If i’m not mistaken, that was on #main?

    I edited mine to this on in my child theme

    #main {
    	clear: both;
    	padding: 0.625em 0 0;

    I’m not 100% because I changed several things, and didn’t take great notes

    Starting there, I have a bunch of info on working with twentyeleven if you want to see more info

    Rev, thanks for the idea. I tried replacing the code I previously had in styles.css in my child twenty eleven theme but the spacing issue persists. I did check out your site – very good info there on several topics.

    Any other suggestions to eliminate the extra white space below the menu would be much appreciated.

    You don’t have a twentyeleven child theme active!!!???

    I’m looking at your site, and you still have twentyeleven active, so no edits in your child theme will do anything….

    The child theme has to be the active theme for it to work…..

    Thanks for taking a look and catching that. I will go back through the steps I performed to create the child theme and update the banner. When I activate the child theme, the site title and text are displayed instead of the custom banner graphic. I thought the process was to activate the 2011 theme and that it pulled in attributes from the child theme – sounds like I had that backwards…. sorry for my confusion – newbie pains.

    Yup, you had it backwards.

    Here’s the deal.

    YOu never make edits to twentyeleven

    You make a child theme, and activate it. Any edits you make to your child theme take precedence over the parent theme. And by making edits in the child theme, your code stays safe may have a little more info if you are interested

    I tried the solution at the bottom of this post, worked like a charm (as long as your child theme is activated). I even went a little overboard and specified -10, it sheared my post titles in half. 🙂

    I got the child them issue worked out and tried implementing both ideas in the post above into the updated style.css file in the child theme directory on the server. These didn’t work for my site – not sure why.

    I was able to make the change using the techniques in the posting at

    My issue is now resolved. Thanks for your help and suggestions.

    Can anyone help me eliminate the extra space between the header and the video content on my webpage? Looks funny with such a big gap. Tried a lot of things but nothing has worked yet. Much appreciated.

    The correct answer is:
    1. Go to your child theme style.css
    2. Add this line
    #main, .hentry{padding:0;}
    3. Done.

    Can I ask where exactly on the child theme style.css do you insert that suggestion?



    Forum Moderator

    Try adding it to the end of your child’s stylesheet. Generally speaking, and unless you’re specifically advised otherwise, the end of a stylesheet is always the best place for new CSS rules.

    This is the style.css in my child theme :

    Theme Name:Twenty Eleven Child
    Version: 2.0
    Theme URI:
    Description: A basic starter child theme for Twenty Eleven
    Author: Mel Pedley
    Author URI:
    Template: twentyeleven
    /* Import layout */
    @import url(../twentyeleven/style.css);

    #main, .hentry{padding:0;}

    So I place these changes here below this information.



    Forum Moderator


    I placed the code above at the very end of style.css but there was no change in spacing. Here is a link to the site http://www2/

    As you can see there is way too much space above and below the “Welcome to mgpi”

    I’m so sorry about the link. It should be

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘TwentyEleven: How to reduce whitespace below menu and Page Title’ is closed to new replies.