BuddyDev

Search

[Resolved] Align badge in center on Mobile[Buddypresss User Badges]

  • Participant
    Level: Initiated
    Posts: 2
    Anthony Palacios on #35181

    We have used this code to try to align the responsive version to display in the center as the desktop display fine. However, nothing seems to center and we have tried various ways of centering it.
    ‘.bp-user-badges-badge-list img {
    width: 200px !important;
    height: 75px !important;
    justify-content: center;
    }’

  • Keymaster
    (BuddyDev Team)
    Posts: 24149
    Brajesh Singh on #35185

    Hi Anthony,
    Please use this css

    
    .bp-user-badges-badge-list{
      justify-content: center;
    }
    

    That should do it.

    Regards
    Brajesh

  • Participant
    Level: Initiated
    Posts: 2
    Anthony Palacios on #35202

    That did it. Thanks!

  • Keymaster
    (BuddyDev Team)
    Posts: 24149
    Brajesh Singh on #35214

    Hi Anthony,
    Thank you for the confirmation.

    I am glad it is resolved.

    Regards
    Brajesh

  • Participant
    Level: Initiated
    Posts: 2
    Anthony Palacios on #35226

    Question: Can this be edited for mobile devices only? This centered it on desktop as well. I would only like it centered on phones.

  • Keymaster
    (BuddyDev Team)
    Posts: 24149
    Brajesh Singh on #35236

    Hi Anthony,
    Sure. we can use media query to do that. Here is the updated css.

    
    
    @media screen and (max-width: 720px ) {
       .bp-user-badges-badge-list{
           justify-content: center;
       }
    
    }
    
    

    Please feel free to adjust the max-width.

    Regards
    Brajesh

You must be logged in to reply to this topic.

This topic is: resolved