How to make configurable list widget responsive?

https://form.jotform.me/62624911802452

I changed to different widget. But I believe this widget when in mobile, it would not look like this kind of layout.

Unfortunately, the configurable list is not responsive on the forms. However, you may inject some CSS code to the Custom CSS code section of the widget to display the widget in multiple lines.

You may try injecting the following CSS code to the widget.

th { display: none; }

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 {

display:inline-block;

float: left;

padding: 20px 5px 1px 1px;

}

td.col1:before { content: "Positions need be filled by"; width: 35%; font-weight: bold;}

td.col2:before { content: "No. of"; width: 18%; font-weight: bold;}

td.col3:before { content: "Type"; width: 10%; font-weight: bold;}

td.col4:before { content: "Freelance"; width: 28%; font-weight: bold;}

td.col5:before { content: "Position"; width: 25%; font-weight: bold;}

td.col1 { width: 35%; }

td.col2 { width: 18%; }

td.col3 { width: 10%; }

td.col4 { width: 28%; }

td.col5 { width: 25%; }

The configurable list will be displaying as shown below:

Let us know if that works for you. We will be happy to assist. 

Please correct the width of the col3 to 20%. Here is the corrected CSS code.

th { display: none; }

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 {

display:inline-block;

float: left;

padding: 20px 5px 1px 1px;

}

td.col1:before { content: "Positions need be filled by"; width: 35%; font-weight: bold;}

td.col2:before { content: "No. of"; width: 18%; font-weight: bold;}

td.col3:before { content: "Type"; width: 20%; font-weight: bold;}

td.col4:before { content: "Freelance"; width: 28%; font-weight: bold;}

td.col5:before { content: "Position"; width: 25%; font-weight: bold;}

td.col1 { width: 35%; }

td.col2 { width: 18%; }

td.col3 { width: 20%; }

td.col4 { width: 28%; }

td.col5 { width: 25%; }

Thank you!