Avatar Size in thread view

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Fleiding
    Senior Member
    • Jan 2012
    • 152
    • 5.3.x

    Avatar Size in thread view

    Hi,

    I am using the code below in my additional.css, but the issue I'm facing now is that some of my users use small avatars (even as small as 28 x 22 px) and they are enlarged now. Is there a line of code I can use so that they will be displayed at their original size?

    Code:
    .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
    margin-left: 240px!important;
    }
    .b-userinfo__details {
    width: 240px;
    margin-left: -20px;
    }
    .l-desktop .b-userinfo {
    width: 210px;
    }
    
    .b-avatar--m {
    height: 125px!important;
    width: 125px!important;
    }
    
    .b-avatar--m > img {
    max-height: 125px!important;
    max-width: 125px !important;
    height: 125px!important;
    width: 125px!important;
    }
    [USER="3396"]media[/USER] only screen and (max-width: 783px) {
    .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
    margin-left:0px!important;
    float:none!important;
    }
    .b-userinfo__details {
    margin-left: 0;
    display:none;
    }
    
    .b-avatar--m {
    height: 60px!important;
    width: 60px!important;
    }
    
    .b-avatar--m > img {
    max-height: 60px!important;
    max-width: 60px !important;
    height: 60px!important;
    width: 60px!important;
    }}
  • Replicant
    Senior Member
    • Sep 2014
    • 527

    #2
    I would require those members to upload new larger avatars. A minimum size should be used to make the UI more uniform in appearance. 28x22 px avatars aren't even large enough for the default software to look right.


    Comment

    • Fleiding
      Senior Member
      • Jan 2012
      • 152
      • 5.3.x

      #3
      Yeah I'm thinking of setting a minimum, so it all should look better.

      I have edited my code to the following and all works well at the moment, but only browsing on my iPad portrait orientation it does not show posters name, avatar and join date. Landscape and portrait orientation on my iPhone is working correct funny enough.

      Code:
      .b-avatar--m > img {
          max-height: 125px;
          max-width: 125px !important;
      }
      .b-avatar--m {
          height: 100%;
          width: 100%;
      }
      
      .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
      margin-left: 240px!important;
      }
      .b-userinfo__details {
      width: 240px;
      margin-left: -20px;
      }
      .l-desktop .b-userinfo {
      width: 210px;
      }
      
      [USER="3396"]media[/USER] only screen and (max-width: 783px) {
      .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
      margin-left:0px!important;
      float:none!important;
      }
      .b-userinfo__details {
      margin-left: 0;
      display:none;
      }}

      Comment

      Related Topics

      Collapse

      Working...
      😀
      😂
      🥰
      😘
      🤢
      😎
      😞
      😡
      👍
      👎