Setting up Configurable list into 2 rows

My Form

On my configurable list (at the bottom), I want to move the sections "Quantity, Positions, Description/Notes" to a second row, so that it is displayed on a mobile device.

Or, if you can show me how to make the list display correctly on a mobile device, that would be better. The fields are running off of the screen.

Thank you.

Unfortunately it is not possible to make configurable list go into 2 rows in mobile friendly manner.

The closest to it would be to either set the fields up completely through CSS - with hardcoded positioning - which can be a bit difficult to maintain and could look different on different systems.

The following CSS code however does try to break it into 2 for devices with smaller dimensions:

@media screen and (max-width:690px)
{
#list th {
    display: none;
}
#list td {
    display: block;
}
td:before {
    font-weight: bold;
}
td.col1:before {
    content: "Date ";
}
.col1 .dateContainer:before, .col2 select:before, .col3 select:before, .col4 select:before, .col5 select:before {
    color: red;
    content: "*";
}
td.col2:before {
    content: "Time In ";
}
td.col3:before {
    content: "Time Out ";
}
td.col4:before {
    content: "Quantity ";
}
td.col5:before {
    content: "Position ";
}
td.col6:before {
    content: "Description/Notes (ie Gear, Tools ) ";
}
}

You can see how it looks here:

https://form.jotform.com/60145138662958

Is that something that you could use?

I forgot to mention that the CSS above should go into Configurable list widget styles, not into the form styles - if it goes there (form styles) it would not change configurable list.

Works perfect. Thank you!

On behalf of my colleague, you are welcome. If you have any addition question or issue, please do not hesitate contacting us. We will be glad to assist.

I have moved this to a new thread here: http://www.jotform.com/answers/756424  so that we can properly assist with this.

We will be replying shortly to it.