Display a mini-version of user avatars in posts in the mobile version?

@Ange Tuteur Is there any way to force a mini version of user avatars in forum and blog posts in the mobile version of our website?

Thanks in advance.

See if this will work:  https://help.forumotion.com/t143013-display-topic-images-on-the-mobile-version?highlight=mobile ?

I said avatars not images. They have different variables.

Avatars are images:

Yes, but avatars won't be added using that code, PS I already had that feature to begin with.

The problem is that the mobile template doesn't have the avatars available, however I do believe Javascript and CSS could be used as a work-around.

I should have a modification for that in the theme I designed for the mobile contest. See the template modification here :
https://help.forumotion.com/t142854-important-results-of-the-mobile-contest#972553

If you don't want the theme, this is the CSS for the avatar :

Code:

.avatarMobile {
  background:#39C;
  border:1px solid #555;
  border-radius:20px;
  height:20px;
  width:20px;
  display:inline-block;
  vertical-align:bottom;
  margin-bottom:-0.1em;
  overflow:hidden;
}
 
.avatarMobile img {
  max-width:20px;
  max-height:20px;
}

@Ange Tuteur Don't I have to change my template like you did for that theme to add those variables?

Edit: I'd actually like to use that theme, but for some reason it doesn't seem like Mobile Version CSS variables work for some reason...

@Ange Tuteur? Bump...

I'm assuming it's the problem you had in other topics whilst copying code. So, try pasting the minified theme instead :

Code:

#mpage-body{background:#FFF}#mpage-body .post .content a{color:#FFF;text-decoration:underline}#mpage-body .post .content a:hover{color:#333}#mpage-body .post{color:#FFF;background:#39C;margin:6px 3px;border-radius:3px}#mpage-body .postbody .post_header{color:#FFF;background:#333;border-radius:3px 3px 0 0}.avatarMobile{background:#39C;border:1px solid #555;border-radius:20px;height:20px;width:20px;display:inline-block;vertical-align:bottom;margin-bottom:-.1em;overflow:hidden}#mpage-body .postbody::after,#mpage-body .postbody:after,.mobile_title{background:0 0}.avatarMobile img{max-width:20px;max-height:20px}.mobile_title{border:none}.mobile_title.application_header{background:#FFF;border-bottom:1px solid #CCC}.mobile_title_content{color:#333;text-shadow:none}.mobile_set{color:#FFF;background:#333;border:none;border-radius:3px;margin:6px 3px}.mobile_set_content{text-shadow:none;line-height:16px}.mobile_item{background:#39C;border:none;border-radius:3px;margin:6px 3px;padding:0;overflow:hidden}.mobile_item:hover,.mobile_item_content:hover{background-color:#333}.mobile_item_content{padding:6px 0;background-position:-2px 50%}.mobile_comment,.mobile_subtitle{color:#FFF;text-shadow:none}.defaultBtn,.mobile_next_button,.mobile_prev_button{background:#39C;border:none;border-radius:3px}.mobile_next_button p,.mobile_prev_button p{color:#FFF;text-shadow:none}.defaultBtn:hover,.mobile_next_button:hover,.mobile_prev_button:hover{background:#333}.inputTxtContainer{padding:0;border:none}#mpage-body textarea,.inputTxtContainer .inputTxt{color:#666;border:1px solid #CCC!important;border-radius:3px;padding:5px}#mpage-body textarea:hover,.inputTxtContainer .inputTxt:hover{border-color:#39C!important}#mpage-body textarea:focus,.inputTxtContainer .inputTxt:focus{border-color:#333!important}#mpage-body .codebox,#mpage-body .spoiler,#mpage-body blockquote{color:#666;background:#FFF;border:1px solid #333;border-radius:3px;display:block}#mpage-body .codebox p,#mpage-body .spoiler_title,#mpage-body blockquote cite{color:#FFF;background:#333;border-radius:3px;display:block;float:none;padding:.5em;margin-bottom:.5em}#mpage-body .codebox code,#mpage-body .spoiler_content{color:#39C;background:#EEE;border:1px solid #CCC;border-radius:3px;padding:.5em}.errorMobile{color:#FFF;font-size:.8em;font-weight:700;background:#E53;padding:16px 5px}#mpage-body .poll .fieldset{border:none}#mobileActionBar{background:#8C5;font-weight:700}#mobileActionBar .mobileActionLabel{background-image:url(http://i18.servimg.com/u/f18/18/21/41/30/add10.png);text-transform:uppercase;font-size:1em}.mobile_item_link_content{background-image:url(http://i18.servimg.com/u/f18/18/21/41/30/chevro10.png);background-position:99% 50%}.cat_new,.cat_no_new{background-image:url(http://i18.servimg.com/u/f18/18/21/41/30/folder10.png)}.folder_hot,.folder_hot_new,.folder_new,.folder_no_new,.forum_new,.forum_no_new{background-image:url(http://i18.servimg.com/u/f18/18/21/41/30/no-new10.png)}.cat_locked,.folder_locked,.folder_locked_new,.forum_locked{background-image:url(http://i18.servimg.com/u/f18/18/21/41/30/locked10.png)}.folder_announce,.folder_announce_new,.folder_global,.folder_global_new{background-image:url(http://i18.servimg.com/u/f18/18/21/41/30/announ10.png)}.folder_sticky,.folder_sticky_new{background-image:url(http://i18.servimg.com/u/f18/18/21/41/30/pinned10.png)}.cat_new,.folder_announce_new,.folder_global_new,.folder_hot_new,.folder_locked_new,.folder_new,.folder_sticky_new,.forum_new{background-color:#8C5}

Actually there seems to be a flaw in the Forumotion mobile selectors. It turns out the code is working, but it doesn't apply the changes on ANY ipad device. So technically my original issue is resolved, but I'd like to keep this thread open so we can work together to figure out why mobile CSS doesn't seem to apply on ipad browsers.