Adding Vertical Space Between Items

Another thing that has really bugged me about the template that I have been using (Gantry framework by RocketTheme) is that there is basically no space (vertically) between the items listed on the front page.  This means the “Read more…” is literally right on top of the next article’s (or item’s) title.

So, I finally got around to fixing it after not finding any easy answers on the Net and wanted to post a little “How To” here.  We begin by opening the k2.css as described at the beginning of this article.

Next, in your text editor, search for latestItemView.

You should find something like:

div.latestItemView{
}

Hit return after the open brackets to make a new line and enter:

margin-bottom: 2cm

Of course you can make the size of the margin anything you want.  It can be in px or cm.  I just pulled a random number out of my head and thought it looked ok.  I’ll have to see how it responds to mobile devices and that, so it may be adjusted in the near future.

Anyway, save it and replace the original as described in the other article.  Make sure to clear your browser cache before you check to see how it works or you may think it didn’t.

Good luck and keep on keepin on, or uhhh…  Whatever.