add a space between header and post

today I'm going to show you how you can create some space in between the header and the post so i recommend you use a new blog until you understand how this works then you could apply it to your current blog as I'm not responsible if you mess your template up now it depends what template you have but most of them already have this bit of code so you will need to make sure you have the following code



if you cant find it on your template don't worry just add it after the header like i have done above and make sure you add a closing div tag at the bottom like below



now you need to look for the following CSS code again it depends what template you have if you cant find it you will need to add it but without the padding:0 16px; value



once you have found it or added it you need to add the highlighted code to the content-wrapper you just found or added and you can change the 50px value to whatever you want it depends how much space you want between the blogs header and the post



once done preview your template before saving to see the space you just created then save or change the 50px value if you need more or less space

15 Responses to “add a space between header and post”

Hi,
I cannot see the photos for some reason :( .
I've always wanted to add a space between header & post.
can you please try to post it again.
Thank you.

Hi,

I finally did it,you can see it:

http://arabicbites.blogspot.com/

Thank you so much for this helpfull blog.

zainab

Hi Jamiz,

can you tell me how to make my header in center.
http://arabicbites.blogspot.com/

Thank you.

zainab

Hi,
Thank you for answer me but I don't have the code you talking about.

do you mean header description?

Thank you so much. Super easy to add and get the space I needed! Thanks again.

Excellent! Thanks a million for this!!

Worked like a charm!

Hello. I do get some extra space after my header, but everything shifts over to the left. This means I have a huge margin on the right side.
What am I doing wrong?

@Lydia
Hi what is the url of the site you are trying this on ? and what are you trying to do ?

Wow thanks for replying!
http://writerquake.blogspot.com

I just changed from the Tic Tac Blue template to Washed Denim. I added a header photo. What I'm hoping to do is to have white space between the bottom of the header photo and the beginning of posts and everything on the sidebar. When I followed your directions I did get some space where I want it, but it moved my entire page over to the left. There was more space on the right. So it looked weird.

I really appreciate your advice! Thanks much.

@Lydia
try this first look for the following code

#header-wrapper {
margin:0;
padding: 0;
background-color: #ffffff;
text-align: left;
}

change the margin to something like

#header-wrapper {
margin:0 0 50px 0;
padding: 0;
background-color: #ffffff;
text-align: left;
}

this puts a 50px margin at the bottom of your blogs header adjust to suit i hope this helps you

Yes!!

Thank you so much! It's 5:40 a.m. here in Oregon and I've been up all night. I waited a bit for your reply and am SO impressed that you hung in there with me. Now I can get some sleep.

You are great. I am bookmarking you right now. :)

@Lydia
Glad i was able to help you are welcome anytime thanks for your comment

I did this, but it lowers the pages links too. Is it possible to add a margin between the bottom of the pages links and the post title?

@Carrie
you can try the following css code which should work

#crosscol-wrapper{
margin-bottom:20px;
}

Leave a Reply

Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.

Note: only a member of this blog may post a comment.

Copyright © 2016 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger