Announcement

Collapse
No announcement yet.

Increase the avatar of your Forum

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

  • Aros12
    commented on 's reply
    Thanks Replicant!

  • Replicant
    commented on 's reply
    You are missing the @ on the media line. This will cause the issue you are having.

  • josueinaki
    commented on 's reply
    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 size
    Last edited by josueinaki; Tue 9 Feb '16, 9:32pm.

  • Aros12
    replied
    Anyone?

    Leave a comment:


  • Aros12
    replied
    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:


  • glennrocksvb
    replied
    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:

    Code:
    .b-userinfo {
        width: 210px;
    }
    should be:

    Code:
    .l-desktop .b-userinfo {
        width: 210px;
    }

    Leave a comment:


  • Aros12
    replied
    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:


  • glennrocksvb
    replied
    Code:
    .b-userinfo {
        width: 210px;
    }
    Btw, with all your CSS changes, it broke the responsive view in mobile.

    Leave a comment:


  • Aros12
    replied
    Here you go...

    http://www.hobbysquawk.com/forum/rc-...nam-tiger-moth

    Leave a comment:


  • glennrocksvb
    replied
    Originally posted by Aros12 View Post
    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?
    You need to post a link to your forum as other CSS may be affecting the centering.

    Leave a comment:


  • Aros12
    replied
    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:


  • josueinaki
    commented on 's reply
    thank you to show me this, will try this code

  • napy8gen
    replied
    Bigger avatar for vb5, CSS solution by Replicant in post no 4 http://www.vbulletin.com/forum/forum...tar-field-size

    Leave a comment:


  • josueinaki
    started a topic Increase the avatar of your Forum

    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 {
     
    bordernone;
    }
    .
    l-desktop .b-avatar--{
        
    height32px;
        
    width120px;
    }
    .
    l-desktop .b-avatar--img {
        
    max-height120px;
        
    max-width120px !important;
    }
    .
    l-desktop .b-userinfo {
        
    text-aligncenter;
        
    color#252C2F;
        
    padding10px 0px 0px 7px;

    Last edited by josueinaki; Sat 6 Feb '16, 8:48am.

Related Topics

Collapse

Working...
X