WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How Can I Make This Avatar Smaller On Mobile Devices? (6 posts)

  1. gregfielding
    Member
    Posted 1 year ago #

    I know this is a bbpress template, but I'm not getting any help over on those forums...

    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’ => ‘
    ’, ‘show_role’ => true ) ); ?>

    What can I replace that line with so that it will show the link and avatar but limit the size to maybe 30px?

    Thanks!

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

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Did you look at the CSS for the avatars:

    #bbpress-forums div.bbp-topic-author img.avatar, #bbpress-forums div.bbp-reply-author img.avatar {
        border: medium none;
        float: none;
        margin: 12px auto 0;
        max-width: 80px;
        padding: 0;
    }
  3. gregfielding
    Member
    Posted 1 year ago #

    Yeah but how would I make use of that so that it only changed on mobile devices?

    I've used conditional tags to make my site (child theme of twenty twelve) mobile-friendly.

    Like this:

    '<?php if (wp_is_mobile() ) : ?>

    NEED CODE HERE

    <?php else : ?>
    <?php endif; ?>'

  4. gregfielding
    Member
    Posted 1 year ago #

    I just played with the css, trying to change the width to a percentage. The problem is then the avatar is no longer square.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Not sure, but this seems to work in Firebug:

    #bbpress-forums div.bbp-topic-author img.avatar, #bbpress-forums div.bbp-reply-author img.avatar {
        border: medium none;
        float: none;
        height: auto;
        margin: 12px auto 0;
        max-width: 80px;
        padding: 0;
        width: 50%;
    }
  6. gregfielding
    Member
    Posted 1 year ago #

    That did it. Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic