Blogger Margin Fix

When it comes to tweaking your blog, sometimes you will find some of your page elements being shifted away from its original desired position. And most of the times you wouldn't find an easy fix for this. This tends to happen when you are hiding an element from your page. As a result, some gap is resulted at the place where the element was supposed to be, causing a distorted look.

In this tutorial, you will learn a simple trick on how to 'pull' a page element towards a certain direction using CSS code. I wanted to include this tweak in my previous tutorial, when I was writing on how to hide an annoying tag that would appear in label pages. Then again, I thought it'd be better if this tweak has it's own page as well. So here it is.

Step 1:

First we'd have to identify the Class or ID of the element that we are going to fix. In the example from my previous tutorial, this is what FireBug's inspection yielded:

So I will be pulling this element upward by addressing it's class, which is column-center-inner.

Step 2:

To fix the margin, I will be using the followinc CSS code:

.column-center-inner{
margin-top: -30px; 
}

The value 30 is arbitrary. You gotta adjust this value by trial and error. But if you're gonna do this often, I suggest you get yourselves useful add-ons, like MeasureIt.

Step 3:

Even though the CSS code above will do the job, applying it to your whole template will not be a good idea because it will shift your posts up in all the pages in your blog. It is okay if you're having the margin problem in all of your pages. In that case, you can apply the code in Step 2 to all of your pages by going to Template Designer - Advanced - Add CSS - Paste the code - Apply to blog.

But if you were following my previous tutorial, you will be having problems in selected pages only. So you should not apply the fix to all of your pages. What we're gonna do now here is apply our fix to one selected page alone. From your template's Edit HTML - Find for </b:skin> - Paste the following code directly below </b:skin> :

<b:if cond='data:blog.url == "http://southernspeakersv2.blogspot.com/search/label/Tutorial"'>
<style>
.column-center-inner{
margin-top: -30px; 
}
</style>
</b:if>

Of course, don't forget to change the URL above to the URL of the page you want the fix to apply. My inserted code looks like this in Edit HTML:

That's about it! See the final result below: