Reducing white space between logo and header image

• 

  nicolaspooner1 · Member · Apr 6, 2014 at 4:27 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  designsimply · Member · Apr 6, 2014 at 12:35 pm

  • Copy link

  You’ve got a really good start!

  I would recommend changing this:

  #branding {
  	background: url('http://nicolaspooner.files.wordpress.com/2014/04/024_nspcvs_logo_300px.jpg') no-repeat;
  }

  To this:

  #branding {
  	background: url('http://nicolaspooner.files.wordpress.com/2014/04/024_nspcvs_logo_300px.jpg') 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.

• 

  nicolaspooner1 · Member · Apr 6, 2014 at 8:20 pm

  • Copy link

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

• 

  designsimply · Member · Apr 6, 2014 at 9:50 pm

  • Copy link

  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('http://nicolaspooner.files.wordpress.com/2014/04/024_nspcvs_logo_300px.jpg') no-repeat;
  	max-height: 97px;
  	overflow: hidden;
  }

• 

  nicolaspooner1 · Member · Apr 6, 2014 at 10:42 pm

  • Copy link

  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?

• 

  designsimply · Member · Apr 7, 2014 at 3:18 pm

  • Copy link

  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;
  }