Fixing display problem on mobile version of form...

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.

Can someone help me fix these display problems?

Thanks,

Art

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.

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

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.