Use BLACKFRIDAY2024 to get 25% off on all our plugins, themes and memberships till December 1st

BuddyDev

Search

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

  • Participant
    Level: Initiated
    Posts: 2
    Anthony Palacios on January 2, 2021 at 12:47 pm #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: 24645
    Brajesh Singh on January 2, 2021 at 7:29 pm #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 January 3, 2021 at 2:08 pm #35202

    That did it. Thanks!

  • Keymaster
    (BuddyDev Team)
    Posts: 24645
    Brajesh Singh on January 3, 2021 at 7:58 pm #35214

    Hi Anthony,
    Thank you for the confirmation.

    I am glad it is resolved.

    Regards
    Brajesh

  • Participant
    Level: Initiated
    Posts: 2
    Anthony Palacios on January 4, 2021 at 1:54 pm #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: 24645
    Brajesh Singh on January 5, 2021 at 12:22 am #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