CSS: Adjust the Date Picker size on mobile view

For our 2025 Kusko Ice Classic form, we use several date / time fields with time enabled. When completing the form on a cell phone, the AM/PM dropdown is not visible without scrolling over to the right (see attached screenshots). This means that people will easily miss this dropdown, and since it has a default based on the time of day the form is completed, it will not prompt users to complete / change it.

I found similar support tickets for mobile view issues that involved CSS codes but when I put them in, they didn't work for this specific issue.

We need one of these options to resolve this:

1- ability to get it within the boundaries of the mobile screen view

2- or UNDER the date time selection row so that it is visible

3- OR remove default value so that it must be selected or else will produce error (it's a mandatory field)

Hi BCSF,

Thanks for reaching out to Jotform support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi BCSF1, 

You can easily adjust the Date Picker size by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

/*Adjusts the the date picker size on mobile view - 25677061*/

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

  .extended.notLiteMode {

    flex-wrap: wrap;

  }

  .form-sub-label-container {

    max-width: calc(25% - 10px) !important;

  }

  .extended.notLiteMode .form-sub-label-container:nth-child(4) {

    max-width: 40px !important;

  }

  .allowTime-container.timeAMPM {

    min-width: 100% !important;

  }

  .allowTime-container.timeAMPM div {

    width: 100% !important;

  }

}

/*Code ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Give it a try and let us know how it goes.

Hi Lara,

I pasted the code into the Styles CSS section and it is still not fitting the screen correctly on mobile.

Hi BCSF1, 

Allow me to look into this and I will get back to you with an update as soon as possible.

Thank you for your patience.

Hi BCSF1, 

Can you try the following code instead?

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

    .extended.notLiteMode {

        list-style: none;

        box-sizing: border-box;

        width: 100%;

        gap: 8px;

        flex-wrap: wrap !important;

        display: flex;

        align-items: flex-start;

    }

    li[data-type=control_datetime] .notLiteMode .form-sub-label-container.day, li[data-type=control_datetime] .notLiteMode .form-sub-label-container.month, li[data-type=control_datetime] .notLiteMode .form-sub-label-container.year {

        list-style: none;

        box-sizing: border-box;

        position: relative;

        margin-left: 4px;

        max-width: 100%;

        flex: 1 1 20%;

        vertical-align: top;

    }



    li[data-type=control_datetime] .allowTime-container {

        display: flex;

        align-items: flex-start;

        padding: 0;

        flex: 1 1 25%;

        flex-basis: auto;

        padding-left: 0;

        margin-top: 16px;

    }

}

See following screenshot for the expected result:

Give it a try and let us know if you need any help.

This second code worked. Thank you!