I’m trying to make my forum look better on mobile devices. As it stands, if you look at a topic and it’s replies, the avatars of the authors take up about half of the screen and the text is all scrunched over to the right.

I’ve switched the sizing to be 20% for the “bbp-reply-author” div and 80% for the bbp-reply-content div. (this is in loop-single-reply.php)

Anyways, the percentage spacing works great except that the avatars aren’t responsive and don’t shrink.

This is the line of code that controls it:

‘<?php bbp_reply_author_link( array( ‘sep’ => ‘<br />’, ‘show_role’ => true ) ); ?>’

I can code a little, but this is beyond me. Any ideas on how to make the avatar responsive?

Or, probably easier, anybody know how I can tweak the above code for use on mobile devices where it will call the avatar in a smaller size?

Here is a link to a forum: http://www.bayarearealestatetrends.com/question/when-will-we-start-to-get-more-inventory/

[bdsweatParticipant @bdsweat 3 months, 1 week ago]

The “half of the screen” problem is pretty bad

We’re just setting up bbPress (migrating an old phpBB forum) and the big avatar problem is annoying. We’re using the “Responsive” theme (themeid.com) and it’s really great on mobile, except for the bbPress pages.

One option might be to hide avatars on mobile. I think that would be a workaround if there’s not a simple way to make the avatars shrink. Of course, I’d rather have them shown at 50% or so

[Stephen EdgarModerator @netweb 3 months, 1 week ago]

You could add some media queries to your CSS and use something like:

`
#bbpress-forums li.bbp-body div.bbp-reply-author img.avatar {
width: 20px;
height: auto;
`

[bdsweatParticipant @bdsweat 3 months ago]

Thanks Stephen, that worked great!