Announcement

Collapse
No announcement yet.

Avatar Size in thread view

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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;
    }
    media 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;
    }}

  • #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


    • #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;
      }
      
      media 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...
      X