Configurable List Widget - Responsive or at least 2 rows?

Hi,

The configurable list on my form is not responsive at all despite many attempts. Thought maybe two rows might resolve this but still not getting anywhere. I would prefer the mobile method. Please help

The widget is not responsive. You may try the next CSS to get a 2 rows layout.

th {

display: none;

}

td.col1,

td.col2,

td.col3,

td.col4,

td.col5,

td.col6,

td.col7 {

display: inline-block;

float: left;

padding: 20px 5px 1px 1px;

}

.col1:before {

content: "Presenter";

display: block;

}

.col2:before {

content: "Sal";

display: block;

}

.col3:before {

content: "First Name";

display: block;

}

.col4:before {

content: "Last Name";

display: block;

}

.col5:before {

content: "Email";

display: block;

}

.col6:before {

content: "Primary Affiliation";

display: block;

}

.col7:before {

content: "Secondary Affiliation";

display: block;

}

td.col1 {

width: 15%;

}

td.col2 {

width: 15%;

}

td.col3 {

width: 30%;

}

td.col4 {

width: 30%;

}

td.col5 {

clear: left;

width: 30%;

}

td.col6 {

width: 30%;

}

td.col7 {

width: 33%;

}

select {

max-width: 120px;

}

Also add the next CSS to the form.

iframe {

  width: 100% !important;

}

Thank you.