Time Field: 24hr format with time range and duration indicator has broken layout on mobile

Greetings, 

I've been testing your platforms for a project of a potential client, and I have encountered this problem: when I use a time field with the time range & duration indicator options enabled, and while using "All questions in one page" layout (both of which  are absolutely crucial for my form to have), the mobile layout is broken as you can see on my screenshot. The form in question is this one : https://form.jotformeu.com/73121870084351 and the mobile preview is exactly what I view on both android and ios mobile devices. How can I fix this? Shrinking the selectors or have the second below the first are both acceptable solutions in case there's no relevant CSS command to shrink the field somehow altogether.

Thank you very much for your time

Inject this CSS codes to your form, this should fix it.

[data-type=control_time] .form-sub-label-container {

    width: 20 %!important;

    margin-right: 2% !important;

}

[data-type=control_time] .form-sub-label-container:nth-child(3){

    width: 3% !important;

}

li#id_24 {

    display: inline-block;

}

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

Result:

I have also escalated this to our developers so this will be fixed on the default theme.

Thanks

Thank you for the fast response, i very much appreciate it.

I did inject the CSS as shown in your link, but initially did not corrected the problem. I removed the "mobile responsive" widget and it kinda corrected the problem, as it now appears as shown below:

So, is it possible to make it appear like your screenshot? I do not have any other widgets, and i only added the "mobile responsive" one in my attempt to fix the layout. Am i doing something wrong? Thank you again for your time.

Apologies, there seems to have been a mistake with the first CSS. I added a space between 20 %, it should just be 20%. Anyway, please replace the CSS with the following so it will only affect the mobile view.

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

[data-type=control_time] .form-sub-label-container {

    width:20% !important;

    margin-right:2% !important;

}

[data-type=control_time] .form-sub-label-container:nth-child(3){

    width:3% !important;

}

li#id_24 {display: inline-block;}

}

Thank you very much, the problem is resolved. I really do appreciate the timely response.

Cheers!

Hi,

It should be fixed now.

Thank you