Configurable List: Custom style to fit fields into 2 rows

http://www.jotform.com/answers/595103-Configurable-List-CSS-codes-to-fit-fields-into-2-rows

I found the forum above which is similar to what I need to do to fit my configurable list in a mobile view. The only issue is I need the full date instead of just the month and year. I have been playing around with it for a while but couldn't figure it out.

I really like the way the results are submitted now in one row however the input fields need to be responsive for a mobile device. 

Here is my form: http://form.jotform.us/form/52796185596171

 

- Matt

 

 

I found this css that was able to fit the fields across the scree.

 

@media only screen and (max-device-width:50em){

table#list {width: 100% !important;}

textbox, textarea, select{width:100% !important;}

input[type=text] {width: 100% !important;}

th {font-size: 10px !important;font-weight: normal !important;}

}

 

Is there a way make the fields vertical?

I have checked your form using an android phone and the Configurable List widget on your website looks like this: 

I have cloned your form and added this CSS codes to the Custom CSS tab of the Configurable List widget in your form: 

.dateContainer{

display: inline !important;

}

#list tr:nth-child(1){

display: none !important;

}

#list{

width: 350px !important;

}

th.col1,th.col2, th.col3, th.col4, th.col5,th.col6, th.col7{

display: block !important;

}

td.col1,td.col2, td.col3, td.col4,td.col5, td.col6,td.col7{

display: block !important;

padding-bottom: 8px !important;

}

td.col1:before{

content: "State Name: " !important;

font-weight: bold !important;

color: #55555A !important;

}

td.col2:before{

content: "Date: " !important;

font-weight: bold !important;

color: #55555A !important;

}

td.col3:before{

content: "Route NOS: " !important;

font-weight: bold !important;

color: #55555A !important;

}

td.col4:before{

content: "ODO Reading: " !important;

font-weight: bold !important;

color: #55555A !important;

}

td.col5:before{

content: "Fuel: " !important;

font-weight: bold !important;

color: #55555A !important;

}

td.col6:before{

content: "Fuel 2: " !important;

font-weight: bold !important;

color: #55555A !important;

}

td.col7:before{

content: "Notes: " !important;

font-weight: bold !important;

color: #55555A !important;

}

td.col1{

border-top: 2px solid #55555A !important;

border-top-left-radius: 5px !important;

border-top-right-radius: 5px !important;

}

td.col1,td.col2, td.col3, td.col4,td.col5, td.col6,td.col7{

border-right: 2px solid #55555A !important;

border-left: 2px solid #55555A !important;

}

td.col7{

border-bottom: 2px solid #55555A !important;

border-bottom-left-radius: 5px !important;

border-bottom-right-radius: 5px !important;

}

.add{

margin-top: 8px !important;

}

I have viewed the it from an android phone again, and here's what it looks like on my end: 

Adding another record results to this: 

You can view the clone form by clicking this link: https://form.jotform.com/52805221673957

Please feel free to clone it. 

Also, here's a sample email notification after making a test submission with two records entered on the widget.

I hope this helps. Let us know if you need any further assistance. Thank you.