Comment avatar stretched help

You should change the dimensions in the function that shows your comments rather than with CSS so that your gravatars are downloaded with the proper dimensions already. It depends on the theme, but it’s probably generating your comment lists with wp_list_comments() in a file named comments.php. If so, you should add the ‘avatar_size’ to any arguments. For example:

wp_list_comments( array( 'avatar_size' => 50 ) );

If your theme doesn’t use wp_list_comments() then it probably uses get_avatar() to show the gravatars instead, in which case you would use:

get_avatar( $comment, 50 );

Not using Gravatars, it’s just the default avatar.

Changed everything I could find in the comments.php relating to avatar size to 50 but nothing happened, avatar was still stretched and cut off.

You are actually using gravatar. You can look at your site’s source to see that it’s polling gravatar for the images, not finding one for your email address, and serving your selected default which is a file located here:

https://www.troopsofdoomcomic.com/todcomic/wp-content/themes/comicpress/images/avatars/default/rascal.png

I also, see you’re using comicpress. I’m familiar with the theme and know that it’s comments.php file is annoyingly over-complicated. Assuming you’re using the latest version (or your versions has the same comments.php as the latest versiosn) you should see this on line 28:

'avatar_size'=>64

Change it to:

'avatar_size'=>50

Then on line 32 you’ll see:

wp_list_comments(array('type' => 'comment', 'avatar_size'=>64));

Change it to:

wp_list_comments(array('type' => 'comment', 'avatar_size'=>50));

That will tell gravatar to serve a 50px x 50px image for all non-trackback/pingback comments. The function automatically adds inline height and width attributes which is why, when you set height and width CSS rules for it’s surrounding div with the class comment-avatar, it didn’t properly contain the image.

I suppose, if you want a less elegant solution, you could also change the height and width of the image by doing this in your style.css file to override the inline height and width attributes:

.comment-avatar a img.avatar {
    height: 50px !important;
    width: 50px !important;
}

You are my hero! Thanks!

Tried the comments.php changes first but it had no effect. Made the style.css changes next and it worked. It’s changed in both files now, I hope that’s okay?

Only two more problems left to fix. So far. :p

It’s really just that bit of CSS scaling it down; the function is still serving a 64px X 64px image which is odd since you changed it in comments.php. However, as long as it looks the way you want, it’s really not that big of a deal.