Why does my form not appear mobile friendly?

I have gone to Preference-General Settings and changed the form style to be responsive and I have gone into Designer and also checked the box to make the form responsive but my jotform does not appear to be responsive on a mobile phone. 

Is there a way to fix this?  This form is a clone of a previously responsive form that has only been updated with design details and current information.  I have worked many hours on it and do not have time to start over because the form must go live tomorrow. 

Please advise on how to make it look well on a mobile phone.

https://form.jotform.com/60243989173968 

Thank you.

Jennifer

Your form appears to be rendering properly on mobile. It is mobile responsive except the radio button and checkbox text which does not wrap properly on mobile.

Please inject this CSS codes to your form, this should fixed it.

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

.form-radio-item, .form-checkbox-item {

    white-space: normal;

}

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (paste it at the bottom part)

Result:

I entered the code as you instructed.

The form does not fill the phone portrait screen view.  It's very skinny to the left.  None of the text can be read. 

How is this mobile friendly?  How can I make it more viewer/user friendly? 

Is there a setting too large?

Does the CSS code have a glitch?

Is the graphic above too large? 

https://form.jotform.com/60243989173968 

Please allow us some time to assist with rectifying this situation as I'm able to confirm that after viewing your form it is not yet displaying properly. We will respond as soon as we can with an update to help correct the problem.

Here is what I see now:

UPDATE - I believe I've found the problem and a fix.

Since you're using the Custom CSS to Make it fit Mobile more accurately all you need to do is DISABLE the Mobile Responsive Option in your Form Properties.

That in turn will give you a better result to fit mobile as seen below.

That is much better.  The actual form fits the screen. The header photo did not adjust to fit.  Are there certain dimensions I should be following or is there a way to auto-adjust when opening on a phone?  See comparison between first photo of phone screenshot and second photo of PC screenshot. 

Please try injecting the following custom CSS codes to your form:

.form-all::before {

    background-size: contain !important;

}

Or

.form-all::before {

    background-size: 100% !important;

}

Here's how to inject: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

Definitely, that code has the form looking much better.  There is little gap between the image and the text of the form but I can work with that unless you have a fix for that.

Inject this CSS code: 

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

    .form-all::before {

   top: -250px;

}

.supernova .form-all{

margin-top: 260px;

} 

}

It will display the form properly on mobile devices.

Yes, that worked.  Thank you very much!!!

Great to know that and you're welcome.

Do not hesitate to contact us if you need more help, we will be happy to assist you.