How Can I Make This Avatar Smaller On Mobile Devices?

  • Resolved gregfielding

    (@gregfielding)


    11 years, 2 months 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/

Viewing 5 replies - 1 through 5 (of 5 total)
  • WPyogi

    (@wpyogi)

    11 years, 2 months 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;
}

    Thread Starter gregfielding

    (@gregfielding)

    11 years, 2 months 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; ?>’

    Thread Starter gregfielding

    (@gregfielding)

    11 years, 2 months 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.

    WPyogi

    (@wpyogi)

    11 years, 2 months 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%;
}

    Thread Starter gregfielding

    (@gregfielding)

    11 years, 2 months ago

    That did it. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How Can I Make This Avatar Smaller On Mobile Devices?’ is closed to new replies.

Tags