Edit Form Fields Height and Width

  • Profile Image
    michelchoueiri
    Asked on February 10, 2021 at 01:19 AM

    Hello, I have a current form setup, but the field height and width are extremely bulky, especially on mobile. Is there a way to thin them out?

    Example of current form on mobile:

    1612937943_60237ad7d799c_

    Would like to make them like this:

    1612937961_60237ae914a26_

  • Profile Image
    safak
    Answered on February 10, 2021 at 02:54 AM

    Hello, michelchoueiri

    You must inject custom CSS for this.

    1. On form builder, click on the brush icon.
    2. Click on the Styles tab.
    3. You can inject custom CSS codes this section.

    1612942582_60238cf6d7a93_1.png

    Sample CSS for just a vertical mobile screen and just Full Name area make full width;

    @media only screen and (max-width: 480px) {
      li[data-type=control_fullname] [data-wrapper-react=true] .form-sub-label-container {
      flex: 1 1 100%;
      }


      li.form-line:not(.form-line-column)[data-type=control_fullname] .form-input-wide [data-wrapper-react]:not(.extended) .form-sub-label-container+.form-sub-label-container {
      margin-left: 0;
      margin-top: 15px;
      }  
    }

    Also https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    If you require further assistance, please feel free to contact us.