Wednesday, August 19, 2015

How to reduce space between Blog title & description?

The moment you create a blog in blogger/blogspot.com and then open it for the first time, you will be surprised to see presence of unwanted space between your blog title and blog description statement. This is indeed not wanted. But the good thing is we can either remove it permanently or hide temporarily. 
   
  
To remove it permanently
If you want to remove this unwanted space permanently and maintain only a required space between your blog title and blog description, incorporate following steps and edit your blog

Login to your blog>Click on Template>Click on Edit HTML>Search (Ctrl+F): .Header h1 { and below it find the codes that resemble the given code:
.header-inner .Header .titlewrapper {
  padding: 22px $(header.padding);
}

To reduce the space between the blog title and blog description or tagline whatever you wants to call it, reduce padding px in above code. You are advised to start from -1. In my case, I will reduce from 22px to -22px. This gave only desired space between my blog title and blog description statement. Hope you got it right.

To hide it temporarily
We can also hide it temporarily by adding custom CSS to our template. But this doesn't guarantee that this awkward space won't appear when you change your blog template. If you will use the current template for quite sometime, hiding it is a good option. To get it done in your blog, follow the given steps and incorporate in your blog:

Login to your blog>Click on Template>Click on Customize>Click on Advanced>Scroll down and click Add CSS>In Add Custom CSS area, copy and paste the given CSS:

.Header h1 {margin-bottom:0}
.Header .description {margin-top: 0;}
.header-inner .Header .titlewrapper {padding-bottom:0;}
  
Once it's being pasted, see whether space between your blog title and blog description gets reduced or not. If gets reduced, you must have got it right. Click on Apply to blog and you're done. It's easy. Cheers!

No comments:

Read our comment Policy to know your rights & responsibilities before actually leaving a comment for this article.

Related Posts Plugin for WordPress, Blogger...