Config List Widget doesn't work on Samsung Mobile Google Chrome

I have a form that our staff use to track our vehicle logs.

On page 5 of our form we are using a widget that allows a horizontal list of fields that allows our drivers to enter the travel time, mileage etc.

But on the Android / Samsung Mobiles when staff enter page 5, they only see a few of the fields.  If we select Desktop Version it works, but when the reach the other side of the widget and want to start a new line, they can see the left side of the field.

Is there anyway we can make the form to always be the exact dimension of the width of the form we created regardless of what phone they use to avoid this problem.

Config list widget isn't mobile responsive but can be turned into a responsive one by injecting custom CSS codes on the widget settings.

For the "Travel Details" field in your form, inject these CSS codes. This would align the fields vertically on mobile which makes them all visible and easy to fill.

@media screen and (max-width:500px){

.checkbox, .radio {margin: 3px 0; min-width: 70px; } div#listContainer {background: #fff; } th{display:none;} td {float: left; margin: 0 !important; display: block; min-height: 40px; } td:before{display:block} input[type=text], select, textarea{box-shadow:none; border-radius:0; padding:4px; } td[class*="col"]:before {width: 30%; float: left; } td {max-width: 620px; width: 100% !important; } td [name="input"], td > select, textarea{width: 68% !important; box-sizing: border-box; } img.calendarIcon {display: none; } .radio {width: 50%; float: left; } .buttonsColumn {min-height: 30px; } textarea {min-height: 120px; } .buttonsColumn {text-align: right; } 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; }

td.col1:before {content: "";}

td.col2:before {content: "Time Start";}

td.col4:before {content: "Kms Start";}

td.col6:before {content: "Start from Location Address / Suburb / State";}

td.col8:before { content: "Answer ONLY when you stop driving?"; }

td.col9:before { content: "Travel Ended at Location Address / Suburb / State"; }

td.col11:before { content: "Time End"; }

td.col13:before { content: "Kms End"; }

}

Guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

This is how it'd look on mobile.

You can actually use the same CSS codes for the other config list fields. You only have to replace the labels in the code as well as the column numbers.