Reducing space above and below menus in Twenty Eleven

  • Author
    Posts
  • #1031652

    msmidt
    Member

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

    The site I am working on is:
    http://eaglesonblondeau.com/

    Specifically, I would really like to reduce the space below the menus and the first headline “Available soon.” Secondarily, I would like to reduce the space above the header photo and the name of the blog.

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

    The blog I need help with is eaglesonblondeau.com.

    #1031852

    zandyring
    Staff

    To remove the space between your menu and your top article, add this to your CSS style sheet:

    .singular.page .hentry {
        padding: 0;
    }

    Then, to adjust the padding at the top, under the tag and above the image, add this:

    #site-description {padding-bottom: 1em;}

    You can change the 1em to whatever spacing looks right to you – you can do decimals, like .8em or 1.2em, or whatever.

    You didn’t ask for this, but if you want to further reduce the padding between the title and the top of the content area, do this:

    #site-title {padding-top: 1em;}

    Good luck!
    -Z

    #1031868

    msmidt
    Member

    Thanks so much! This all seems to be helping.

    Here is what it looks like now:
    http://eaglesonblondeau.com/

    Two questions, if you would indulge me:
    1) I think there is still a lot of space between the tagline (“Distinctive downtown living…”) and the image. What would be the coding to reduce this space?

    2) How do you find out all these codes for the different themes?

    Thanks again.

    — Mark

    #1031869

    zandyring
    Staff

    Mark,

    To reduce that space, you want to target the bottom margin of your site description:

    #site-description {margin-bottom: 0;}

    You can increase that number if you want, but that will get you to zero margin at least.

    If you don’t see a change, add an “important” note to it, like so:

    #site-description {margin-bottom: 0 !important;

    I use Firefox primarily, so I look at the code using Firebug. It’s an add-on that you can easily install on Firefox – just do a quick search for it, or look in Tools/Add Ons.

    Good luck!
    -Z

    #1031871

    msmidt
    Member

    You are the best!

    I’ll have to look at the code and see what I can figure out.

    Thanks again.

    — Mark

    #1031872

    zandyring
    Staff

    It takes some getting used to, but it can be really fun once you get rolling. My recommendation is to just keep playing with it – that’s the best way to get used to it. As obvious as it sounds…

The topic ‘Reducing space above and below menus in Twenty Eleven’ is closed to new replies.