How can I make fields the correct width on phones

My fields are really wide on mobile but correct on tablets and desktops. How can i fix this? I attached screen shots of a tablet and phone. Birthdate and Q1 are both messed up. I definitely want the q1 (and rest of my questions not as wide). I can live with the birthday field. 

Hi, thank you for reaching out to us.

You can insert this custom CSS code:

input#input_5, input#input_6,
input#input_7, input#input_8,
input#input_9, input#input_11,
input#input_12 {

    width: 20% !important;

}

Here is a guide on how to inject a custom CSS codes: How-to-Inject-Custom-CSS-Codes

Let me know if you need further assistance.

Hi, please update the previous CSS code to this code:

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

input#input_5, input#input_6, input#input_7, input#input_8, input#input_9, input#input_11, input#input_12 {

        width: 20% !important; }

      }


Here is a guide on how to inject a custom CSS codes: How-to-Inject-Custom-CSS-Codes

Let us know if this works for you.

OK now I am confused. I had forgotten I had asked this before. 

I was previously told this: 

Since the forms are mobile responsive by default, the width of the fields shall be automatically adjusted based on the screen size. Please try adding the following CSS code to the form to display the fields at the same width in the portrait mode as well.

@media screen and (min-width: 10px) and (max-width: 540px){

    .form-textbox {

      width: 60px !important;

    }

}

So now do I add them both together for the following?

@media screen and (min-width: 10px) and (max-width: 540px){

    .form-textbox {

      width: 60px !important;

}

input#input_5, input#input_6,
input#input_7, input#input_8,
input#input_9, input#input_11,
input#input_12 {

    width: 20% !important;

}

I think we replied at the same time - will try it

Ok my questions on the form are correct width  now but I want to fix the  birthdate field. How can i do this??The date picker has the month too narrow and i am not using lite mode. If i change to lite mode on the date picker then the field is too long. I tried adding it to the CSS you sent but no luck (not sure why). Any thought? 

Hi,

Please add this custom CSS code: 

@media screen and (max-width: 600px)

li[data-type="control_datetime"] input.form-textbox[type="tel"] {

    padding: 5px 5px 5px 5px;

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

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

    width: 15% !important;

    margin-left: 1%;

    margin-right: 1%;

}

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

I have other CSS and when I added all of this my other CSS broke. Do you guys offer phone support. I was supposed to have these forms launched by May 1. Every time i work on them i need some sort of support and now this project is 2 months behind mainly because of your support and your product not being user friendly. 

I also now have to merge a couple forms together and i see no way to do that either. I am really frustrated and would love to work with someone by phone!

We sincerely apologize for any inconvenience you may have encountered.

Unfortunately, we don't provide phone support except for Enterprise users. However, we will try to be of help using this support system in the most way possible.

Could you please allow me some time to closely look into this?

I promise I will be right back the soonest I can.

Your patience is most appreciated.

Thanks for patiently waiting.

There was a CSS code conflict in your form.

I have successfully injected the following CSS code into your form:

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

      [data-type=control_datetime] .form-sub-label-container:first-child 

              width: 22%!important;

}

}

[data-type=control_datetime] .form-sub-label-container:last-child {

margin-left: 4px !important;

width: 17px !important;

}

}

I hope I have been of any help.