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/

[@bdsweat Participant 11 years, 10 months 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 🙂

[@netweb Keymaster 11 years, 10 months 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;
`

[@bdsweat Participant 11 years, 10 months ago]

Thanks Stephen, that worked great!

[@schneidi76 Participant 10 years ago]

Hey Stephen,

that worked great. Thank you very much for that tip. Now I want to shrink the font size of the username which has replied to the post. It is underneath the avatar. I’m trying to find that now since hours… 🙁 could you give me a tip on that? Is it also in the css-file of the theme?
Is it also possible to let the user role and IP disappear? 🙂

I would really appreciate your help.

Adrian

[@schneidi76 Participant 10 years ago]

Hey Stephen,

that worked great. Thank you very much for that tip. Now I want to shrink the font size of the username which has replied to the post. It is underneath the avatar. I’m trying to find that now since hours… 🙁 could you give me a tip on that? Is it also in the css-file of the theme?
Is it also possible to let the user role and IP disappear? 🙂

I would really appreciate your help.

Adrian

[@robkk Moderator 10 years ago]

@schneidi76

add this anywhere you can put custom css

add !important at the end if it doesnt work at first too.

to shrink username , change 12px to something lower if you want to go smaller

#bbpress-forums div.bbp-reply-author a.bbp-author-name, 
#bbpress-forums div.bbp-topic-author a.bbp-author-name {
clear: left;
display: block;
font-size: 12px;
}

to make user role disappear

#bbpress-forums div.bbp-forum-author .bbp-author-role, 
#bbpress-forums div.bbp-reply-author .bbp-author-role, 
#bbpress-forums div.bbp-topic-author .bbp-author-role {
display: none;
}

the IP is only seen by keymasters , and it is very useful if you want to block users who are spammers, but if you want to remove it just use this CSS.

span.bbp-author-ip {
    display: none;
}

[@robkk Moderator 10 years ago]

@shortgigs

its probably because your bbpress styling is custom or you need to clear some cache maybe.

make an administrator account with also the forum role being keymaster. and send the login details to robkk17@gmail (dot) com and ill check on it later.

i need an administrator/keymaster account just so i can check on the IP address thing.