What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form Layout not showing properly in mobile and tablets

    Asked by hphanpeterson on October 01, 2015 at 06: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

     

    Page URL:
    http://salutecolorado.org/application/

    layout Mobile not showing properly
  • Profile Image
    JotForm Support

    Answered by Chriistian on October 02, 2015 at 03: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.

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 02, 2015 at 05: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.

     

  • Profile Image

    Answered by hphanpeterson on October 02, 2015 at 01: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 

     

  • Profile Image

    Answered by Ben on October 02, 2015 at 02: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?