Larger Avatars In Postbit?

[Aros12]

Not sure this applies but I am on vB5.2 and with Replicant's help I got my avatars to increase while maintaining responsive integrity.

This is in the additional.css...

/* start custom avatar size */

.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;
}}

I also increased the width of the postbit itself to accommodate the larger avatar size and user info...(Change colors, etc to taste)

/* widen postbit to 200px*/
col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
    margin-left: 200px;
}
.l-col__fixed-3, .l-row__fixed--left > .l-col__fixed-3 {
    width: 200px;
 
}

/*make width mod responsive*/
@media screen and (max-width: 784px){
 col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
    margin-left: 0px;
    }

}

.sb-dialog.ui-dialog-content.ui-widget-content a, {
   font-size: 12px;
    color: #000;
    text-decoration: underline;
}
  
.sb-dialog.ui-dialog-content.ui-widget-content a:active, {
   font-size: 12px;
    color: #4871c3;
    text-decoration: underline;
}
  
.sb-dialog.ui-dialog-content.ui-widget-content a:visited {
   font-size: 12px;
    color: #4871c3;
}

.conversation-list.stream-view.stream-view-full-width .list-item {padding: 10px 10px 10px 10px; }

.view-mode .widget-no-border .widget-header {margin-top:15px;}

.b-photo-count .b-photo-count__count {
    font-size: 12px;
    color: #000;
}
.b-userinfo__details .author a {color: #FFFFFF !important;}

.b-userinfo__details .author a:hover {color: #FF9600 !important;}

.b-userinfo__details {
    font-size: 12px;
    color: #90b9fd;
}
.b-userinfo__details a {
    font-size: 14px;
}
.b-post {
    background: #28428c;
}
.b-icon__status--green:after {
    content: '';
    border: 10px solid #6e9d00; /* green, change as needed */
    background: transparent;
    border-radius: 40px;
    height: 40px;
    width: 40px;    
    position: absolute;
    top: -24px; /* you may have to tweak this if you move it from the default position */
    left: -22px; /* you may have to tweak this if you move it from the default position */
    z-index: 1;
    opacity: 0;
    -webkit-animation: glow 3s ease-out infinite;
    animation: glow 3s ease-out infinite;
}

@-webkit-keyframes glow {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }

    25% {
        -webkit-transform: scale(0);
        opacity: 0.1;
    }

    50% {
        -webkit-transform: scale(0.1);
        opacity: 0.3;
    }

    75% {
        -webkit-transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

@keyframes glow {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }

    25% {
        transform: scale(0);
        opacity: 0.1;
    }

    50% {
        transform: scale(0.1);
        opacity: 0.3
    }

    75% {
        transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 0.0;
    }
  .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;
}}