DateTime fields showing vertically instead of horizontally on mobile devices

I have a time field in my form.  On a computer it shows horizontally as designed.  However, on my mobile device, the fields are stacked vertically.  How can I change this behavior?

Thanks

The reason that each drop-down of the DateTime field displays like that on mobile devices, is that the containers that hold each of those separate drop-downs are all set to have 100% width - essentially making them take the full width of your mobile device.

I would recommend applying the following custom CSS to your form, which will affect only mobile device screens larger than 481 pixels and smaller than 640 pixels - which is where this issue seems to exist:

@media screen and (min-width: 481px) and (max-width: 640px) {
  #cid_9 > .form-sub-label-container {
    width: 10%;
  }
}

You can apply custom CSS to your form by following this guide:

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

Please let us know how it goes, and whether this resolved the issue you were having.

I applied the CSS.  No change.  Tried on my tablet with two different browsers.

Please try adding the following CSS to your JotForm.

@media only screen and (device-width: 768px) {

  #cid_9 > .form-sub-label-container {

    width: 10%;

  }

}

I have checked the cloned version of your JotForm using an emulator after applying the above CSS and it displayed fine.

Please let us know if you need any further assistance. We will be happy to assist.

Jotform continues to lead the industry in product support.  Thanks for helping resolve that problem!

On behalf of my colleagues, you are welcome! Open a new thread if you need anything else, we will be glad to assist you.