I’m creating a form with a multi-choice field connected to a linked field in Airtable. There are a bunch of choices that take up quite a bit of room, so I’m wondering if there’s a way to reduce the font size of the selections so they take up less room.
I’m not technical, so if I need CSS to do this I need baby steps 
I assume you want the chips style of the choice component? If so, then the only way to reduce the font size is to leverage CSS if you have Glide’s Business plan.
Correct. I have the business plan but have not used CSS with it before.
Do you want this for only one specific choice component or multiple ones?
This one is the most important, but I could use it for the others. In other words, if the code made them all the same font size, that’s fine.
Just out of curiosity, is there a reason you don’t want to use a Dropdown style Choice component?
Chips style is okay, but it can get very busy once you have more than a handful of choices. 
2 Likes
Good question, maybe I’m doing something wrong but the regular drop my choices don’t have enough horizontal space for my choices. My choices are too long text-wise and I can’t shorten them.
Please try this in Settings > Appearance > Custom CSS.
li[class*="wire-choice"] {
font-size: 10px;
}
1 Like
Awesome–thank you, that worked!
Is there a similar code for regular dropdown menus to reduce the font size?
I checked the code and I thought this should work:
li[data-testid="wc-item"] span {
font-size: 10px !important;
}
However it doesn’t have an effect when I try it in the builder, I suspect the fact that the choice elements are only generated after you click the dropdown has something to do with it. I haven’t tested it in a published app.
1 Like
Thank you. I tried that and it didn’t reduce the size of my font in the dropdown (see attached).
In addition to the CSS that I’m pasting in the Settings > Appearance tab, I noticed there’s also a spot for CSS on the item that I’m editing.
- When would I use that vs the one in Settings?
- And/or do I copy the CSS code in both spots?
That’s just for you to give a human-friendly name to the component, that you can use to reference later in your CSS code. The code itself should only be pasted in Settings > Appearance.
Just following up on this…I tried the most recent code you sent for the regular dropdown and it didn’t reduce the size of my font in the dropdown (see attached). Is there something else that I can try so people can see the whole selection in the dropdown?
Yeah, I could never get it to work. If you convert it to the “pills” choice, would it be ok? Do you have a lot of choices to display?
Unfortunately, yes, I have a lot of choices to display so the “pills” layout take way too much space. Is there anywhere else I can look for an answer? I’ve googled the heck out of this.
I don’t think I have a solution here. Sorry.
1 Like