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

    Fixing display problem on mobile version of form...

    Asked by artgueli on November 24, 2015 at 09:45 PM

    I have several display problems with my form, "BottomPage" (https://form.jotform.com/artgueli/bottom-page)...

    1) The tabs for the pages stack on top of one another when the form displays on mobile devices, lengthening the space the form takes up on a mobile screen. I'd like to hide the tabs only on the mobile version of the form, or shrink them to display well on mobile screens. 

    2) The top and bottom padding/margin between the questions is very large on mobile displays, which also lengthens the form. I'd like the spacing on mobile to be a reasonable distance.

     

    3) I'd like the tabs on the desktop version of the form to display like the form on this page (scroll to bottom page of center content column to view form):

     

    http://www.injuryclaimcoach.com/settlement-letter.html

     

    Can someone help me fix these display problems?

     

    Thanks,

     

    Art

     

     

    problem Mobile mobile version JotForm shrink content
  • Profile Image
    JotForm Support

    Answered by Charlie on November 25, 2015 at 03:16 AM

    Thank you for contacting us.

    Here are the answer to some of your questions:

     

    1) The tabs for the pages stack on top of one another when the form displays on mobile devices, lengthening the space the form takes up on a mobile screen. I'd like to hide the tabs only on the mobile version of the form, or shrink them to display well on mobile screens. 

    You can use this custom CSS code to hide the tab when in mobile view:

    @media screen and (max-width: 550px) {

        #tabs-list {

        display: none !important;

       }

    }

     

    If you want to adjust the width of the tabs in mobile view, then perhaps this CSS code would work:

    @media screen and (max-width: 550px) {  

        #form-tab-1, #form-tab-2, #form-tab-3 {

            width: 30% !important;

            height: auto !important;

        }

    }

    You can paste those custom CSS code under the "CSS tab" in your Form Designer.

     

    2) The top and bottom padding/margin between the questions is very large on mobile displays, which also lengthens the form. I'd like the spacing on mobile to be a reasonable distance.

    Now for adjusting the spacing between questions, you can adjust the line height.

     

    You can make adjustments on your form and on the tabs by using the Form Designer Tool. You ca also inject custom CSS codes to design elements on your form.

     

    Now for the 3rd question you have, please refer to this link instead: http://www.jotform.com/answers/711596. We will address it accordingly.

    Thank you.

  • Profile Image

    Answered by artgueli on November 25, 2015 at 03:41 PM

    Thanks for your response. The solutions for removing the tabs works great.

    The problem with my 2nd question is that your response tells me how to adjust the spacing for the desktop version of the form. The padding and margins look great on the desktop version. When I view the form on mobile however, the top/bottom padding or margins are too big, casuing a large amount of space between some of the questions. How can I fix this on mobile?

    Thanks,

    Art

  • Profile Image
    JotForm Support

    Answered by jonathan on November 25, 2015 at 08:19 PM

    Hi Art,

    Can you confirm that this was the form http://www.jotform.us/form/53285732210146 that have the issue. I checked on mobile browser and I currently see it like this

     

    Is the bottom space the one you refer to as the issue?

    Currently this is how the form will behave since it doesn't have anything else to fill in the whole screen. It is a very short form that uses page break.

    If you like the form to fill in the whole mobile browser screen, you can increase the vertical padding/spaces in between the fields. You can do it in the Form Designer / Line Layout / Line Spacing properties.

    Hope this help. Let us know if issue remains.