Imbalance header customisation: blank space at the bottom

• 

  chloepradal · Member · May 23, 2014 at 2:43 am

  • Copy link
  • Add topic to favorites

  Hi everyone,

  I changed the size of the header’s image in my blog (theme Imbalance 2), and then I had to change the position of the menus and widget in my header for it to remain esthaetic.

  But now, I have all this blank space at the bottom of my header, before my articles and posts.
  What can I do to erase this blank space ?

  Many thanks for your help!
  Here is the css code I used to change the header :

  /*Size F20 logo in the header*/
  #header-image-link img {
  display: none;
  }

  #header-image-link {
  display: block;
  background: url(‘http://f20creativefrance.files.wordpress.com/2014/05/cf-f20-cmyk_mod-270px.jpg’) no-repeat;
  width: 270px;
  height: 169px;
  }

  /*position English menu*/
  #header-left {
  position: relative;
  width: 100%;
  top: -150px;
  left: 350px;
  }

  /*position French menu*/
  #header-center {
  position: relative;
  width: 100%;
  top: -293px;
  left: 650px;
  }

  /*position search widget */
  #header-right {
  position: relative;
  width: 100%;
  top: -240px;
  left: 0px;
  }

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 23, 2014 at 8:30 pm

  • Copy link

  Hi there, #header has 50px of padding at the bottom. Add this and adjust as desired.

  #header {
  padding-bottom: 50px;
  }

  If that isn’t quite enough (at 0) then you can also adjust the bottom margin on #header: before.

  #header:after {
  margin-bottom: 40px;
  }

• 

  chloepradal · Member · May 26, 2014 at 6:55 am

  • Copy link

  Thanks, sacredpath

  After several attempts, I used those specification :

  #header {
  padding-bottom: 0px;
  }
  #header:after {
  margin-bottom: -90px;
  }

  and it’s a little bit better. The height of the blank space is reduced, but it’s still there.

  Maybe I need to change something in the first code lines I used to change the header ?

• 

  kathrynwp · Staff · May 29, 2014 at 10:02 pm

  • Copy link

  I don’t see that code in your custom CSS – is it possible you accidentally didn’t save it? This is all the custom CSS I see at the moment:

  .category .page-title {
  	font-size: 0;
  }
  
  .category .page-title span {
  	font-size: 2rem;
  }
  
  /*alignement centré du logo Ambassade dans le footer*/
  #footer-left {
  	position: relative;
  	width: 100%;
  	text-align: center;
  	left: 44px;
  }
  
  /*taille de l'image calendrier*/
  #main #content img {
  	max-width: 1222px;
  }