Adding Space between Posts

Adding Space between Posts

Sometimes, blogger's request How do I add more space between the bottom of one post (The Footer) and the top of the next post (The Header).

I know this way to do it - there may be other ways.

Image 1 - here is a screen print of the area in question. At the bottom of the post, there is not much space between the Star Ratings info and the dotted line - separating this post from the next post. In other words, the 'footer' area of this post.

To change this, I needed to increase the Post's bottom margin on my Template.

The first thing I did was to make a Back-up copy of the Template. That's always a first when doing work on the Blog Template.

Secondly, I needed to identify which section I wanted. I wanted to increase the Post footer section.


It looked like this:


}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}


Then, I had to add the order to change the layout. I had to add a bottom margin. That looked like this:

}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
margin-bottom: 3.0em;
}


Image 2 - See where I added it? That's right -

margin-bottom: 3.0em;

I could have gone to 4.0em, or 5.0em, but 3,0 was OK for my needs. Here is the result -

It's not a big difference, but it served my needs.


Then, I Saved and then made another Back-up copy of my Template. Don't forget to do this!!


TOP