Badges Displayed on User Profile are Stacked

[RhoLee]

We just launched our badges yesterday, and only a few appear on the user profile page, and they are stacked. 
They show correctly if you open the badges link, but I'm trying to make it more aesthetically pleasing. Any suggestions?

Link for example: https://forum.telus.com/t5/user/viewprofilepage/user-id/39563

[TariqHussain · Accepted solution]

@RhoLee -  Its just a CSS issue.  Add this to your community CSS. 

.ViewProfilePage #userBadgesList .lia-quilt-column.lia-quilt-column-04.lia-quilt-column-inner {
    width: 33%;
    margin-top: 10px;
    padding: 0px;
}

[BrianOblinger]

That's actually kind of a cool display view. It would be neat if they would reveal and grow on mouseover.

[ClaudiusH]

Congrats on the launch, @RhoLee. Nice branded badges you got there. Makes it a much more "Telus experience" right away.

And here's @BrianOblinger's variation:

.ViewProfilePage #userBadgesList .lia-quilt-column.lia-quilt-column-04.lia-quilt-column-inner:hover {
    z-index: 10;
    zoom: 1.2;
    top: -5px;
    left: -5px;
}

[RhoLee]

Thanks for the help @ClaudiusH! It looks much better now. 

It is still only showing 6 badges in the right column. Is there a way to show all of the badges in that column?

[ClaudiusH]

The idea behind the "My Badges" widget you are using on the profile page is to show (at maximum) the 6 most recent unlocked badges for that member. The top right navigation arrow allows to navigate through to the full list on the badge page.
This widget was designed intentionally like that to be used on the profile page and keeping that page lightweight but still relevant through showing the most recent badge achievements.
If you still want to show more badges within the "My Badges" widget you would need to create a custom component.