Field Width on Mobile

Hello,

The City/State/Zip fields are being reformatted when viewing on mobile. they look perfect on tablet, desktop.

Could you please advise?

Hello @Shemia,

Thank you for contacting our support team.

After checking your form, I have found that you are using CSS code to style your form and there are some media queries to format the fields when your form is in the mobile view.

However, as I am checking the code, I can see that there are some errors that are not allowing your CSS to run properly.

As you can see, there is a red x on line 3 of your CSS code. It seems that you have missed some curly brackets to open and close the media query. Please fix this error on your form and let us know if the issue persists.

Yes, I am using CSS.

I don't see any errors on my end. I am able to adjust the width of all other fields, except the City/State/ZIP

I adjust the width on the field settings and within CSS, but both does not display correctly on mobile.

My apologies, after checking again, I can see that there is no error.

I went ahead and made a clone of your form to test the CSS further without interrupting your actual form.

Upon testing I found that the media query is adjusting the width of the inputs. It is making all inputs 80% of their normal width.

However, it seems that in your CSS you have set the input IDs #input_7, #input_714, and #input_9 to be a width of 100 without any defining unit of measurement. I believe you may have meant to put 100px there.

After changing the width of the inputs to 100px on my cloned form I do believe the fields are resizing correctly now. Here is a screenshot of how I see the fields on my mobile device:

Cloned Form - https://form.jotform.com/203015965499969

Nevermind, I forgot to include !important after the px width. didnt know I needed to included it. thanks!

Hello @Shemal,

Thank you for the update. Yes, always insert an '!important' flag after you styles to force the changes.

Also, if you do need to clone a form, you certainly can. Here is a helpful user guide to assist you with that - How-to-clone-an-existing-form-from-a-URL

Please let us know if you have any further questions or concerns, we are always happy to help.