Troubles making the form mobile responsive

  • Profile Image
    BDH0001
    Asked on May 31, 2016 at 08:49 AM
    I would actually rather use a link for the form but can't get it to display nicely on mobile phones. The preview in your designer also shows it looking rather stupid. All the fields are shrunk to tiny proportions. I have ticked responsive in the form settings. This makes absolutely no difference.
  • Profile Image
    Boris
    Answered on May 31, 2016 at 09:04 AM

    I see that your last edited form is form 61463248327962, named SMB-Regular Bundle GBP Recurring. If this is the form you were having issues with on small screens, I see it is caused by the existing styling of the form:

    .form-section {
      padding: 1px 112px 1px 112px;
    }

    The existing styles are adding a blank space that is 112 pixels wide to the left and right side of the form, which is causing issues when the form is viewed on smaller screens. To fix this, we can apply the following custom CSS to your form:

    @media only screen and (max-width: 640px) {
      .form-section {
        padding: 0;
      }
    }

    You can add custom CSS to your form by following this guide:

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

    What the above CSS marked with green background will do is it will remove padding from the sides of the form on screens that are 640 pixels wide or less, so your form will appear like this on 640 pixels wide screens:

    And like this on 360 pixels wide screens:

    Please try it out let us know how it goes. Thank you.