Forms viewing issues on mobile devices

  • Profile Image
    lscclibrary
    Asked on October 17, 2017 at 03:37 PM

    When viewing my form via a mobile device the form fails to render properly on a small/phone screen. See link (https://cl.ly/n8YN). Here is the link to the form.

    (Form Link)

     

  • Profile Image
    Mike
    Answered on October 17, 2017 at 05:35 PM

    It looks like that your form design/theme is based on a Adobe FormsCentral imported template, so the form looks a bit different on mobile compared to the standard themes.

    I have replaced the HTML heading element on your form with a standard Header element and added the next CSS:

    @media only screen and (max-device-width: 550px){
    .form-line.form-line-column {
    margin-left: 0;
    }
    .jotform-form {
    padding-top: 0;
    }
    .form-all {
    padding-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    }
    .form-submit-button {
    height: inherit !important;
    }
    .header-logo {
    min-width: 75px;
    vertical-align: middle;
    }
    div.form-header-group {
    margin-left: 6px !important;
    margin-right: 6px !important;
    }
    }
    .form-all {
    padding-top: 0 !important;
    }
    [data-type=control_head] {
    background: white;
    }

    Please re-check the form on mobile.

  • Profile Image
    lscclibrary
    Answered on October 17, 2017 at 06:06 PM

    Thanks. The form looks better on my iPad but the form fields are stretched to the edges of my phone. See link below.

    iPhone View

  • Profile Image
    Mike
    Answered on October 17, 2017 at 07:38 PM

    This is normal for mobile view. If you would like to add some paddings around the text boxes we can help with the CSS.

    Would you like to have something like this?

  • Profile Image
    lscclibrary
    Answered on October 17, 2017 at 07:43 PM

    Yes that would perfect. Could you also provide me the CSS so that I can apply it to my other forms.

  • Profile Image
    Mike
    Answered on October 17, 2017 at 08:54 PM

    Here is a sample CSS to set the 15 pixels left and right paddings on the mobile view:

    @media only screen and (max-device-width: 550px){
    .form-line {
    padding-left: 15px !important;
    padding-right: 15px !important;
    }
    }

  • Profile Image
    lscclibrary
    Answered on October 17, 2017 at 10:03 PM

    Where exactly would I put this in the form? Once I select the CSS tab in the form is there a specific area where this should be placed?

  • Profile Image
    Rose
    Answered on October 18, 2017 at 04:20 AM

    You can put that particular css code to a place where does not engage with other css codes. I put it to the bottom on the cloned form and it just works as my colleague said. 

    1508314768Screen Shot 2017-10-18 at 11.2

    Here is the screenshot how your form will be seen after this:

    1508314806Screen Shot 2017-10-18 at 11.2

    If you have more questions, please do not hesitate to contact us.