CSS: Make MI smaller than other labels?

How do you use CSS to change the width of specific fields?

For example, I want First Name, MI, Last Name (MI = Middle Initial, one character)

When I use:

First Name : text

MI: text

Last Name: text

It displays all three fields with the same width. How can I use CSS to make the "MI" field smaller than First and Last Name?

Hi Joe,

Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Hi Joe,

To decrease the width of your Middle Initial field, we need to use Custom CSS code. Let me show you how to do it:

1. First, copy this code:

.configurable-list-field-row {

display: grid !important;

grid-template-columns: 25% 10% 25% 30%;

}

.configurable-list-field-wrapper {

max-width: none !important;

}

2. In Form Builder, select Configurable List widget and click on Wand icon to access Widget Settings.

3. In Widget Settings, click on Custom CSS tab and under it paste the CSS code.

4. Lastly, click on Update button on the right-bottom part of the screen.

You can check out this Demo Form so you can try it by yourself. If you want to clone the form, you can check out this guide about How to Clone an Existing Form From a URL. You can check out this guide about How to Inject CSS Codes to Widgets.

Give it a try and let us know how it goes.