# Choice Chips the same width with CSS

**URL:** <https://community.glideapps.com/t/choice-chips-the-same-width-with-css/81372>\
**Category:** Ask for Help\
**Tags:** custom-css\
**Created:** [April 16, 2025, 8:02am UTC](https://community.glideapps.com/t/choice-chips-the-same-width-with-css/81372 "2025-04-16T08:02:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alina](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alina/32/65894_2.png) [@Alina](https://community.glideapps.com/u/Alina)\
**Post date:** [April 16, 2025, 8:02am UTC](https://community.glideapps.com/t/choice-chips-the-same-width-with-css/81372/1 "2025-04-16T08:02:46Z")

</div>

Hello Gliders!

Is there a way to make chips in choice component the same width with CSS? Or any other way to make it look better?

 ![chips](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/5/15f3fdc1d325a456b42b4dfe5e219faeb06a00de.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 17, 2025, 12:23am UTC](https://community.glideapps.com/t/choice-chips-the-same-width-with-css/81372/2 "2025-04-17T00:23:48Z")

</div>

![CleanShot 2025-04-17 at 07.23.02](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/c/ac85be0f32f6ae23435854e55a658a44357efd05.png)

Custom class name: adjusted-choice.

Code:

```auto
.adjusted-choice li {
width: 60px;
justify-content: center;
}

```

Please try this and let me know if it works for you. Adjust the width as needed.

---

<div class="post-metadata">

**Author:** ![Alina](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alina/32/65894_2.png) [@Alina](https://community.glideapps.com/u/Alina)\
**Post date:** [April 17, 2025, 8:41am UTC](https://community.glideapps.com/t/choice-chips-the-same-width-with-css/81372/3 "2025-04-17T08:41:42Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> .adjusted-choice li {
> width: 60px;
> justify-content: center;
> }
> 
> ```

This is beautiful, thank you!

I took it a bit further and made the elements centered:

.adjusted-choice li {  
width: 60px !important;  
justify-content: center !important;  
text-align: center !important;  
margin: 5px auto !important;  
}

 ![chips-new](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/82a88f5a8a3fddf1467e8829c6f5bf67f16405d6.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 17, 2025, 9:13am UTC](https://community.glideapps.com/t/choice-chips-the-same-width-with-css/81372/4 "2025-04-17T09:13:06Z")

</div>

Just a note: Was the !important needed for each line?

---

<div class="post-metadata">

**Author:** ![Alina](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alina/32/65894_2.png) [@Alina](https://community.glideapps.com/u/Alina)\
**Post date:** [April 17, 2025, 10:34am UTC](https://community.glideapps.com/t/choice-chips-the-same-width-with-css/81372/5 "2025-04-17T10:34:49Z")

</div>

Honestly, I don’t know. Claude did it and it works)

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 17, 2025, 12:12pm UTC](https://community.glideapps.com/t/choice-chips-the-same-width-with-css/81372/6 "2025-04-17T12:12:24Z")

</div>

@ThinhDinh when playing with Glide CSS classes, I always add the !important, because sometimes, the style is added inline from JavaScript in Glide, making custom CSS classes useless until you add the !important keyword.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [April 24, 2025, 12:12pm UTC](https://community.glideapps.com/t/choice-chips-the-same-width-with-css/81372/7 "2025-04-24T12:12:32Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.