How to make my form mobile (phone) friendly?

I've created a form and used a widget so it can be used over the phone, but the users are having a hard time using it. The Date/Time won't fit and it's causing error as soon as you enter the Date because the Time is then cut off.

Please help.

I can see that you already inserted the Mobile Responsive widget in your form. Please try enabling the "Make this form Responsive" option in the Form Designer as well.

Please insert the custom CSS code below in order for the Date Time field to be responsive:

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

#label_10 {
width : 100% !important;
}

div#cid_10 {
display : block;
}

#label_21 {
width : 100% !important;
}

#cid_21 {
display : block !important;
}

span.allowTime-container {
display : block !important;
}

}

Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result: 

Hope that helps. Thank you.

Hi,
Yes, it did helped!
The Dispatch Notification Form just worked beautifully after changes were made.
Although I struggled a little bit with one of the forms (AMG IC Run Sheet) when I modified the form and added the CSS code, because I had to adjust the width; or maybe I was just doing something wrong. But it appears to be working now as I intended. Can you check on this one for me please? If there's anything that I missed?
Thanks again..
 -Cherryl
...

Hello Cherryl,

I did check your form "IC Run Sheet" and it does seems to display correctly in mobile device. I would suggest you to please move your question "Type of Vehicle Use" to a new line and that should give you enough width space to display the date/time filed correctly. Please check the screenshot below:

 

Thank you!