Time and Date field is overlapping on mobile screen

  • cgrouge
    Asked on February 19, 2016 at 3:00 PM

    Everything is displaying perfectly on desktop and mobile except the Date Time field on mobile device. The time begins to overlap the date field and in general, the date field just doesn't look very readable. Here is my form: https://form.jotform.com/60484032554149

    Could you teach me how to resolve this issue? Time and Date field is overlapping on mobile screen Image 1 Screenshot 20

    Jotform Thread 776664 Screenshot
  • David JotForm Support Manager
    Replied on February 19, 2016 at 6:37 PM

    This is the best I have come up with, since it is really hard to make it responsive due to the Time drop downs.

    So, do the following:

    Add the mobile responsive widget: 

    Time and Date field is overlapping on mobile screen Image 1 Screenshot 30

    Inject the following CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    #cid_3{

        width: 55% !important;

    }

    .allowTime-container {

        width: 100% !important;

    }

    }

    Result: https://form.jotform.com/60496297995982 

    Time and Date field is overlapping on mobile screen Image 2 Screenshot 41

    Hope this helps.

  • cgrouge
    Replied on February 22, 2016 at 8:44 AM

    This worked perfectly - displays very nicely on mobile. Thank you!