Field Width on Mobile

  • Profile Image
    Shemia
    Asked on October 28, 2020 at 12:07 PM

    Hello,

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

    Could you please advise?

    1603901176_5f9996f85c3a0_

  • Profile Image
    FelipeSantana
    Answered on October 28, 2020 at 01:46 PM

    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.

    1603906926_5f99ad6e9c7a9_Screenshot (353

    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.

  • Profile Image
    Shemia
    Answered on October 28, 2020 at 02:23 PM

    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.

    1603909278_5f99b69e137c2_

  • Profile Image
    FelipeSantana
    Answered on October 28, 2020 at 04:37 PM

    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.

    1603917058_5f99d50265e69_Screenshot (354

    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:

    1603917370_5f99d63a4d5f4_Screenshot_2020

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

  • Profile Image
    Shemia
    Answered on October 29, 2020 at 12:20 PM

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

  • Profile Image
    FelipeSantana
    Answered on October 29, 2020 at 12:43 PM

    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.