How to narrow down the width of the configurable list?

HI team - I can't sort out how to narrow down the width of the configurable list? On desktop it appears fine, but it does not resize to mobile well, and the item is broken in the survey. Any advice on how to insert a "line break" in the configurable list?

You can achieve this by injecting custom CSS codes on the configurable list widget on your form.

Please follow the steps on the user guide:

https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive

---

Basically, add this CSS codes on your configurable list widget.

#list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

then this CSS codes on the form itself.

Let us know if you are not able to make it work.