Responsive form not displaying correctly

  • mattconroy
    Asked on May 7, 2015 at 7:16 AM

    Hi,

     

    We have a responsive form that is not displaying correctly on iphone. on ipad, laptop and desktop it is fine. Any suggestions as to why this might be? Please see attached screenshot showing issue.

     

    Thanks,

     

    Matt

    Jotform Thread 565616 Screenshot
    Page URL: http://form.jotformeu.com/form/50325127909353
  • Chriistian Jotform Support
    Replied on May 7, 2015 at 9:20 AM

    Hi mattconroy,

     

    Thanks for contacting us.

     

    I am able to replicate your issue in iPhone 4 & iPhone 5 (Portrait). You form seems to have a large margin as well as padding. To resolve this, you need to inject custom CSS. Please see CSS and steps below.

     

    CSS Snippet

    .form-section, .form-section-closed {

    margin: 0px !important; // this can be adjusted to suit your need

    }

    .form-section {

    padding: 0px !important; // this can be adjusted to suit your need

     

    }

     

    Steps:

    1. Open your form in Edit mode and click Setup & Embed.

    2. Click Preferences.

    3. Open Form Styles tab.

    4. Go to Inject Custom CSS and insert the CSS snippet given above.

    5. Click Close Settings.

    Responsive form not displaying correctly Image 1 Screenshot 30

     

    I cloned your form and here is how it looks on iPhone (Portrait) from my side.

     

    Responsive form not displaying correctly Image 2 Screenshot 41

     

    I hope that helps. Thanks.