Skip to:
Content
Pages
Categories
Search
Top
Bottom

How Can I Shrink The Avatar Size On The Topic Reply Page?


  • gregfielding
    Participant

    @gregfielding

    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/

Viewing 3 replies - 1 through 3 (of 3 total)

  • bdsweat
    Participant

    @bdsweat

    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 :)

    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

    @bdsweat

    Thanks Stephen, that worked great!

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.