-
im update the code to be responsive with mobile device like Glenn said. Now the avatar on pc you can make bigger and then mobile device access they will see the normal sizeLast edited by josueinaki; Tue 9 Feb '16, 9:32pm. -
Okay, does this code look correct if I want to have center-justified avatars at 125x125px without causing the responsive mobile mode to break?
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; }}Leave a comment:
-
Use CSS Media Queries.
Or utilize the l-small, l-xsmall, l-desktop CSS classes that vB is adding dynamically to the <body> tag based on the screen size.
For all the CSS you added for increasing the avatar size, prepend the CSS rules with l-desktop class to make them applicable only to bigger screens (includes tablets) and leave the default style for mobile screens alone. For example, this:
should be:Code:.b-userinfo { width: 210px; }
Code:.l-desktop .b-userinfo { width: 210px; }Leave a comment:
-
Thank you again Glenn, that fixed the issue. So, ugh...So is there a workaround for the responsive mobile view when making all of these CSS additions?Leave a comment:
-
Btw, with all your CSS changes, it broke the responsive view in mobile.Code:.b-userinfo { width: 210px; }Leave a comment:
-
Leave a comment:
-
You need to post a link to your forum as other CSS may be affecting the centering.Originally posted by Aros12 View PostLeave a comment:
-
I added the original CSS code by Replicant in post no 4 (thank you), but now the avatar is left justified and not centered...Any suggestions?
Leave a comment:
-
Bigger avatar for vb5, CSS solution by Replicant in post no 4 http://www.vbulletin.com/forum/forum...tar-field-sizeLeave a comment:
-
Increase the avatar of your Forum
When I got the VB5 found small avatars compared to version 4, so I made this code to increase the avatars. Feel free to inform modifications or improvements
Put this in your css_additional.css
Fixed to responsive view in mobile. Thanks Glenn
PHP Code:.l-desktop .b-avatar--thread {
border: none;
}
.l-desktop .b-avatar--m {
height: 32px;
width: 120px;
}
.l-desktop .b-avatar--m > img {
max-height: 120px;
max-width: 120px !important;
}
.l-desktop .b-userinfo {
text-align: center;
color: #252C2F;
padding: 10px 0px 0px 7px;
}
Last edited by josueinaki; Sat 6 Feb '16, 8:48am.
-
Hi Guys,
I've noticed with vb5 that avatars are being re-sized down to ~64x64 regardless of what permissions have been granted to the usergroup.
For instance, the Admin usergroup...Wed 5 Jun '13, 11:45pm -
-
Sorry...I'm going to have lots of questions.
Our old VB4 site before upgrading to VB5 had a set of default avatars logos for our different leagues. The avatars are displayed when I choose to "edit...Fri 9 Dec '16, 8:08am -
I want to change the default avatar on my forum from the shadow guy to a logo of my site. Where do I upload that file to make the change?Sat 29 Nov '14, 10:44am -
Is it possible to make your avatar size larger when you post something?Tue 31 Jul '18, 11:12am
Leave a comment: