Tuesday, January 17, 2012

Blogger Avatar Sitting on Top of Sidebar

I was reading comments on the blog recently when I noticed the avatar images sitting on top of my left sidebar.

If I pushed the #comments div to the right, the avatar would move along with it. This would change my overall margins for the comment section which bothers the symmetrical strain in me but without a clear and apparent place for the avatar to go, was the easiest, fastest way to fix the problem. I decided I could always revisit the styling of comments later.

div#main-wrapper #comments {
margin-left: 20px;
}

does the trick.

We are not writing over the left sidebar anymore which is good. We could push the avatar down some to align it with the user name better. Based on whether it's next to a user name that starts with lowercase or uppercase letters, the alignment looks different so I went for the middle of the road which looks pretty decent.

#comments-block .avatar-image-container {
padding-top: 5px;
}

Blogger users to make these changes, go to DESIGN > EDIT HTML and add the new CSS to your styles.

Post a Comment