Mobile Format issues with date/time fields

My form at http://www.jotform.com/53061970978365 is responsive and looks pretty good except for the date fields, the time fields can't be seen and neither can any of the number fields.

Can you let me know what css I should inject to correct this please?

Could you try adding this custom CSS code instead:

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

    /* first date time field */

    #cid_47 > span.allowTime-container {

        width : 40% !important;

        float: right !important;

    }

    #cid_47 > span.allowTime-container > span:nth-child(1) {

        width : 10% !important;

    }

    #cid_47 > span.allowTime-container > span:nth-child(2) {

        width : 40% !important;

    }

    #cid_47 > span.allowTime-container > span:nth-child(3) {

        width : 40% !important;

    }

    /* second date time field */

    #cid_211 > span.allowTime-container {

        width : 40% !important;

        float: right !important;

    }

    #cid_211 > span.allowTime-container > span:nth-child(1) {

        width : 10% !important;

    }

    #cid_211 > span.allowTime-container > span:nth-child(2) {

        width : 40% !important;

    }

    #cid_211 > span.allowTime-container > span:nth-child(3) {

        width : 40% !important;

    }

}

The CSS code above only changes the first two datetime field I saw in your form.

You can check my cloned form here https://form.jotform.com/53153931823959?, see how it works on mobile devices. 

Let us know if you still need more assistance on this.

Thanks, thats much better for the date, but the length of party in hours box is still not showing on my phone, although it looks fine in the browser when shrunk

I was not able to find the field with a label "length of party" so I presume that you mean the Music Start and Music End fields instead?

Could you also tell us what is the phone (device and system as well as browser) that you are using so that we can try and recreate the same issue in order to see what might be causing it?

Sorry the field which isn't displaying properly are the number fields.

Hours of DJ time

I checked using your jotform https://www.jotform.com/53061970978365 on mobile browser, but I could not reproduce the same issue.

I was able to see proper width of the field 'Hours of DJ Time' and I was able to use it as well.

Can you please provide more details of how it was not displaying properly on your browser?

You can also take a screenshot of it and include the image in your response here.

Let us know if issue persist.

This is how it looks on my phone, it's not possible to see how many hours in the box.

Can you please test again. I have added this CSS code to your form   as well

#input_124 {

    height:20px !important;

}

When I check on my Android mobile browser, I was able to see it working properly.

Please let us know if still not fixed. 

Thanks.

That's corrected the number field, but now the date is not formatted correctly. day month year fields take up all one line with time and date

The CSS code I have added should not affect the other field... so it is kind of weird.

I have removed those CSS codes for now to restore the form to its previous state.

Can you please share to us the kind of mobile device and browser you were using? 

I will try test also on the same device/browser simulator.

Thanks.

It's a one plus android with chrome browser

I'm checking this now and I will let you know later.

Thanks

Check this form, http://www.jotform.com/form/53193084848969 and let me know if everything is alright.

I have changed the custom mobile CSS codes to the following:

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

#cid_47 > span:nth-child(1), #cid_47 > span:nth-child(2), #cid_47 > span:nth-child(3) {

    width: 15% !important;

    margin-right: 1% !important;

}

#cid_211 > span:nth-child(1), #cid_211 > span:nth-child(2), #cid_211 > span:nth-child(3) {

width: 15% !important;

    margin-right: 1% !important;

}

#cid_47 > span.allowTime-container > span:nth-child(1) {

    width: 15% !important;

    margin-left: 5% !important;

}

#cid_211 > span.allowTime-container > span:nth-child(1) {

    width: 15% !important;

    margin-left: 5% !important;

}

div[id*=at_] {

    width: 100px !important;

    margin-left: 30% !important;

}

#input_124 {

    height:20px !important;

}

}

Thanks