Configurable list adjust field size

I am unable to find the correct CSS code to modify the configurable list field sizes for my form. I have four text fields in my configurable list, and I would like fields sized as follows:

The list should be two lines;

Line 1: Field 1 (Street Address) entire width of the page

Line 2: Field 2 (City) half the size of the page; Field 3 (State) and field 4 (Zip Code) to be on the same line as field 2 (City) but each field will 1/4 of the size of the line.

It would look something like this

street address__________________________________________

City_______________________ State______ Zip Code________

Hi ITSupportdesk,

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.

In the meantime, let us know if you have any other questions.

Hi ITSupportdesk,

To have the fields in your form's configurable list widget in two lines, you can inject custom CSS in the widget. Let me show you how:

1. First, copy this code.

/* Jotform ticket: 27015121 */

@media (min-width: 600px) {

    .col1 {

        min-width: 100% !important;

    }



    .col2 {

        min-width: 45% !important;

    }

}

2. Open your form in Form Builder, scroll down, and select the Configurable List widget.

3. Click on the Wand icon on the right side of the widget to open Widget Settings.

4. Under the Custom CSS tab, paste the code into the CSS Code box.

5. Click on the Updated button, to save and close the widget settings.

You can check out the results in my test form here.

Give it a try and let us know if you need any more help.