Tonal: Remove space under header and reduce its size

• 

  essentialistblog · Member · Apr 22, 2015 at 6:18 am

  • Copy link
  • Add topic to favorites

  Hello!

  I’m using the Tonal theme on essentialistblog.wordpress.com

  When I set an image for the header, it’s very large and there’s too much blank space beneath it. Is there a CSS code to set the dimensions for the header image myself and remove the space below it? Or otherwise, if using only a site title, to reduce the blank space beneath that?

  I’m grateful for any advice!

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

• 

  staff-jeanpierreac · Staff · Apr 22, 2015 at 6:44 am

  • Copy link

  Hi! Right now I cannot see your header image, but about your title you can set your padding parameters to be more aligned with what you need. Right now you have 120px to the top as well as to the bottom. You can vary it. For instance, with 20px this is the result:

  #masthead {
      padding: 20px 0px;
  }

  Hope this helps you.

• 

  essentialistblog · Member · Apr 22, 2015 at 8:23 am

  • Copy link

  Hi! Thank you for your fast reply!

  I’ve adjusted the code to

  #masthead {
  padding-bottom: 50px;
  padding-top: 80px;
  }

  and it’s exactly what I wanted. So thank you for that.

  I set it back to a test header image now. Is it possible to reduce the height of the image too?

• 

  staff-jeanpierreac · Staff · Apr 22, 2015 at 10:49 am

  • Copy link

  Glad to see that helped you!

  For the image, try to modify width -height will resize-. For instance:

  #site-header a img {width: 200px}

  Enjoy blogging!

• 

  essentialistblog · Member · Apr 22, 2015 at 1:25 pm

  • Copy link

  Perfect! Just what I needed.
  Thank you very much!

• 

  staff-jeanpierreac · Staff · Apr 22, 2015 at 1:43 pm

  • Copy link

  You are welcome!