Form Layout not showing properly in mobile and tablets

  • hphanpeterson
    Asked on October 1, 2015 at 6:38 PM

    Hi!

    My form is working fine on desktop, but having some layout issues on mobile and tablets. Can you please help fix these issues?

    1. iphone - portrait mode

           a. The layout of the form is extending beyond the screen on several sections(or pages)

           b. Move the progress bar to the top on mobile phones

     

    2. ipad

       a. In section V - References, the Company/Organization field is overlapping the last name field.

     

    I have been trying to fix these issues for sometime now. A quick response will be appreciated.

     

    Thanks!

    Madhu

     

  • Chriistian Jotform Support
    Replied on October 2, 2015 at 3:24 AM

    Hi,

    I'm currently checking on the right media queries and testing it for your form's custom CSS. I'll be posting the custom CSS as soon as I fix it.

  • Chriistian Jotform Support
    Replied on October 2, 2015 at 5:04 AM

    Hi,

     

    Can you try injecting this custom CSS codes to your form and see if works fine?

    @media only screen 

      and (min-device-width: 320px) 

      and (max-device-width: 480px)

      and (-webkit-min-device-pixel-ratio: 2)

      and (orientation: portrait) {

     

    .form-line{ word-wrap: break-word !important; }

     

    .progressBarContainer {

        position:initial !important;

        padding-top:0px !important;

    }

         

        #cid_201 span.form-radio-item label {

         word-wrap: break-word !important;

         font-size:80%;

    }

    }

     

    @media only screen 

      and (min-device-width: 768px) 

      and (max-device-width: 1024px) 

      and (orientation: portrait) 

      and (-webkit-min-device-pixel-ratio: 1) {

     

      span.form-sub-label-container {

        width: 60%;

    }

     

     

    }

     

    Do let us know if you need further assistance.

    Regards.

     

  • hphanpeterson
    Replied on October 2, 2015 at 1:50 PM

    Hi!

    Thanks for the response. Here's my follow up.

    1. iPad - I fixed the layout issue by modifying the original form

    2. iPhone (Portrait Mode) - Unfortunately, the layout still breaks out of the screen. Please test the form on iPhone starting section IV.

    Again, a quick response will be very helpful.

    Thank you,

    Madhu 

     

  • Ben
    Replied on October 2, 2015 at 2:53 PM

    Can you please change the embedding code Madhu, since the one you are using now - js embed code, is being affected by the conflicts made by the code on your website.

    This is causing me to not even be able to go to a new page.

    You can see how to get it here: How to get the jotform iFrame Code

    Now since this is not working, I am looking into the issue on the direct link: http://form.jotform.us/form/40055714382147, but it seems OK to me.

    Can you please check if the issue is there for you when you check your form directly as well?