Edit Form Fields Height and Width

  • michelchoueiri
    Asked on February 10, 2021 at 1: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 Screenshot 10

    Would like to make them like this:

    1612937961 60237ae914a26 Screenshot 21

  • Safak JotForm Developer
    Replied on February 10, 2021 at 2: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 Screenshot 10

    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.