WordPress.com Forums » Topic: Reducing space above and below menus in Twenty Eleven

zandyring on "Reducing space above and below menus in Twenty Eleven"

zandyring — Mon, 08 Oct 2012 16:10:44 +0000

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...

msmidt on "Reducing space above and below menus in Twenty Eleven"

msmidt — Mon, 08 Oct 2012 15:59:27 +0000

You are the best!

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

Thanks again.

-- Mark

zandyring on "Reducing space above and below menus in Twenty Eleven"

zandyring — Mon, 08 Oct 2012 15:47:49 +0000

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

msmidt on "Reducing space above and below menus in Twenty Eleven"

msmidt — Mon, 08 Oct 2012 14:41:12 +0000

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

zandyring on "Reducing space above and below menus in Twenty Eleven"

zandyring — Fri, 05 Oct 2012 12:43:55 +0000

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

msmidt on "Reducing space above and below menus in Twenty Eleven"

msmidt — Thu, 04 Oct 2012 19:07:14 +0000

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.