How can I render the Configurable List Widget as rows instead columns?

Hello,

We'd like to add line breaks to a Configurable List.  We found this article but the css doesn't seem to work on our form.

Can anyone help us break this into three lines that would show better on a mobile device?

Thanks.

Hey @BOTCuser - The CSS codes needed will vary from form to form. Thanks for sharing the URL of the form you're currently working.

Try adding the following CSS codes to the CUSTOM CSS tab inside your CONFIGURABLE LIST widget.

Complete guide: How-to-Inject-CSS-Codes-to-Widgets

td,td:before{display:block}.radio,td{float:left}.checkbox,.radio{margin:3px 0;min-width:300px}div#listContainer{background:transparent}th{display:none}td{margin:16px 0 0!important;min-height:40px;max-width:620px;width:99%!important}input[type=text],select,textarea{box-shadow:none;border-radius:0;padding:4px}td[class*=col]:before,.dateContainer{width:100%;float:left;font-weight:700}td [name=input],td>select,textarea{width:100%!important;box-sizing:border-box}img.calendarIcon{display:none}.radio{width:50%}.buttonsColumn{min-height:30px;text-align:right}textarea{min-height:120px}table{border-collapse:collapse}#list tbody>tr+tr+tr{margin-top:22px;border-top:1px solid #ccc;box-shadow:1px 0 0 #ccc}#list tbody tr td:first-child{padding-top:20px!important}.checkbox label{margin-left:-17px!important;position:relative;left:18px}

td.col1:before {

    content: "Dog Name";

}

td.col2:before {

    content: "Breed";

}

td.col3:before {

    content: "Sex";

}

td.col4:before {

    content: "Class";

} 

td.col5:before {

    content: "Jr. Exhibitor";

} 

td.col6:before {

    content: "Date of Birth";

}

Worked great!  Thank you so much!