# Make the badge boxes for user card larger \[mobile\]

**URL:** https://meta.discourse.org/t/make-the-badge-boxes-for-user-card-larger-mobile/106246
**Category:** Support
**Created:** [11 januari 2019 om 04:00 UTC](https://meta.discourse.org/t/make-the-badge-boxes-for-user-card-larger-mobile/106246 "2019-01-11T04:00:50Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Chaboi\_3000](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chaboi_3000/32/163015_2.png) [@Chaboi\_3000](https://meta.discourse.org/u/Chaboi_3000)
#### Post date: [11 januari 2019 om 04:00 UTC](https://meta.discourse.org/t/make-the-badge-boxes-for-user-card-larger-mobile/106246/1 "2019-01-11T04:00:50Z")

</div>

When clicking and viewing the user card, some badges with long names seems to be too large for the box.

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/1/51ab79dce9ade190a5b4a390d619f9fce446b8a1.jpeg)

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [11 januari 2019 om 04:35 UTC](https://meta.discourse.org/t/make-the-badge-boxes-for-user-card-larger-mobile/106246/2 "2019-01-11T04:35:56Z")

</div>

I noticed this as well. To clarify, this is specific to @Johani’s component for [https://meta.discourse.org/t/mobile-user-cards/105009](https://meta.discourse.org/t/mobile-user-cards/105009). I’m sure he will add a fix to the component, but in the mean time, you could try:

```plaintext
// Prevent wrapping and hide overflow of badge names
// on mobile user cards.
#user-card .badge-display-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

```

It’s cleaner, but you do miss out on the full badge name:

![30%20PM](https://global.discourse-cdn.com/meta/original/3X/8/6/8632a647f4babd82221ef22734d6014cf70b5828.png)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [13 januari 2019 om 08:13 UTC](https://meta.discourse.org/t/make-the-badge-boxes-for-user-card-larger-mobile/106246/3 "2019-01-13T08:13:25Z")

</div>

This is now fixed in the component. Thanks for reporting the issue @Chaboi_3000 and for the fix @tshenry 👍

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [13 januari 2019 om 08:13 UTC](https://meta.discourse.org/t/make-the-badge-boxes-for-user-card-larger-mobile/106246/4 "2019-01-13T08:13:31Z")

</div>