Change avatar size

The Better Messages thread list renders each conversation with a circular avatar on the left. Solo conversations show one square image; group conversations stack up to four sub-avatars in a 2×2 grid inside the same circular container. Both layouts share the same .pic parent so a single CSS override scales them in step.

This snippet bumps the outer avatar circle from the default 40px to 50px and resizes the inner group-sub-avatars to 24px so the four-up grid keeps clean proportions. Adjust the values to match your theme — anything from 32px to 64px works well; beyond 64px you may need to also raise the thread row height so the avatar no longer overflows.

Drop the CSS into your theme's stylesheet or the WordPress Customizer's Additional CSS. The !important flag overrides Better Messages' own scoped styles without forcing you to copy the full selector chain.

This is an example of how to increase or change avatar size in the threads list:

.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .pic {
    width: 50px !important;
    height: 50px !important;
}
.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .pic img {
    width: 50px !important;
    height: 50px !important;
}

.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .pic.group>* {
    width: 24px !important;
    height: 24px !important;
}

.bp-messages-wrap .bp-messages-side-threads .threads-list .thread .pic.group>* .avatar {
    width: 24px !important;
    height: 24px !important;
}