Need help? Check out our Support site, then

Reducing white space between logo and header image

  1. I'm trying to reduce the white space between my logo and header image and have tried all sorts of suggestions online but nothing seems to be working. Im using twenty eleven theme.

    The blog I need help with is

  2. You've got a really good start!

    I would recommend changing this:

    #branding {
    	background: url('') no-repeat;

    To this:

    #branding {
    	background: url('') no-repeat;

    The reason for putting the background image inside the hgroup element would be to make the logo line up better with the main content area (same left margin) in the content below the header image.

  3. Thanks for coming back to me so quickly. I can't see the difference in the two, could you explain?

  4. Yep, I can explain :) I mistakenly copied the same snippet twice! My apologies, here's the actually hopefully better second snippet I meant to paste before:

    #branding hgroup {
    	background: url('') no-repeat;
    	max-height: 97px;
    	overflow: hidden;
  5. Thank you, that has reduced the whit but my logo is now too far to the right, is there any way of moving it over slightly so it looks better on a mobile view?

  6. I noticed the image itself has a bit of white space on either side built in to the image. Maybe that's the extra spacing you're seeing?

    If you don't want to edit the image to remove the spacing that is built in to it, you could change the margins of the hgroup element so they are wider than the margins of the main content area. That way, you would be moving the image in the header over to the left a little more to line up the part of the image where the white space stops. This would work as long as the image is the only content you want to line up in the header area. To try it, add "margin: 0 3%;" to the "#branding hgroup" rule. Adjust the 3% value as needed.

    Before you make that change, you might try adding a temporary border to the header hgroup and main content areas so you can visualize the change as you make it. To do that, add this CSS temporarily in the Appearance > Customize > CSS editor, then make the change noted above, then make sure to take out the borders again before saving:

    #branding hgroup,
    #content {
    	border: 3px dashed red;

Topic Closed

This topic has been closed to new replies.

About this Topic