Choice Chips the same width with CSS

[Alina]

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?

[ThinhDinh]

Custom class name: adjusted-choice.

Code:

.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.

[Alina]

@ThinhDinh

.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;
}

[ThinhDinh]

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

[Alina]

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

[MaximeBaker]

@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.