Form Styling Question

  • Profile Image
    AdminRSCM
    Asked on August 07, 2018 at 04:30 PM

    https://form.jotform.com/82186739458169


    How can i can all my form field lines to be equal in width and to fill the entire form container on all screen sizes?

  • Profile Image
    Adrian
    Answered on August 07, 2018 at 05:18 PM

    In order to achieve that, please remove line 27 in the Custom CSS section of your form and then add the following CSS.

    .form-all { max-width: 600px !important; }
    .form-textbox { width: 100% !important; box-sizing: border-box; }
    .form-line, .form-sub-label-container { width: 100% !important; }

    Cloned Form: https://form.jotform.com/82186350359966

    Help Article: How-to-Inject-Custom-CSS-Codes


  • Profile Image
    AdminRSCM
    Answered on August 08, 2018 at 08:36 AM

    close- but can i have 2 questions side by side on large desktops, than on tablets and mobile the form fields stack like the above example.

  • Profile Image
    AshtonP
    Answered on August 08, 2018 at 10:29 AM

    This depends on what all fields you want to have on a single. If you want to have all the fields two displayed on a single line - 

    You need to replace the existing code with below CSS code. 

    .form-textbox { width: 250px; box-sizing: border-box;}

    .form-line, .form-sub-label-container { width: 300px;}

    However, if you only need a few fields to be lined up in 2 rows then it should be done using the field IDs.

    You can take a look at my form, you can clone it and copy the custom CSS code. 

    https://form.jotform.com/82193706084964

    This shows one field on one line on mobile devices, however, lays in 2 rows on desktop/PC screens.

    You can refer to the articles below -

    https://www.jotform.com/help/27-How-to-clone-an-existing-form-from-your-account

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

    Let us know if you need further information.