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

    I want to decrease space on my form but only on mobile devices

    Asked by betwrestling on March 22, 2017 at 09:20 AM

    I would like to decrease the space between radio buttons on my form but ONLY on mobile devices. Please see screenshot to see which spaces i am referring to that i want decreased.

    How can this be achieved?

    Page URL:
    https://form.jotform.co/70773161313854

  • Profile Image

    Answered by Boris on March 22, 2017 at 01:16 PM

    I'm afraid there wasn't any screenshot attached to your post:

    https://www.jotform.com/answers/1098632

    To decrease the vertical space between different Radio Button fields, and do this only on mobile devices, please inject the following custom CSS into your form:

    @media only screen and (max-width: 640px) {
      li[data-type="control_radio"] {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 1%;
        padding-bottom: 1%;
      }
    }

    You can add CSS to your form by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    The form will end up looking similar to the following screenshot:

    Please let us know should you need further assistance.

  • Profile Image

    Answered by betwrestling on March 22, 2017 at 03:05 PM

    That's great thank you!

    Also, how would i decrease the space between all other elements of the form on mobile devices only? (tabs, header, picture, etc).

    Is there a way to adjust spacing for ALL elements using one piece of code?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 22, 2017 at 07:21 PM

    To affect all the fields in your form you could inject this CSS code: 

    @media screen and (min-width: 480px){

        .form-line, .form-input-wide, #tabs-list{

            margin-top: 0;

            margin-bottom: 0;

            padding-top: 0;

            padding-bottom: 0;

        }

    }

    This should be the result: 

    Hope this helps. 

  • Profile Image

    Answered by betwrestling on March 22, 2017 at 10:08 PM

    Thank you! Just two more things..how do i increase the space between the tabs and main header (e.g 'Goldberg (c) Vs. Brock Lesnar') and also how do i increase the space between the bottom radio options and the page break? Thanks again :-)

  • Profile Image

    Answered by Ian on March 23, 2017 at 02:23 AM

    Here is the code :

    ul#tabs-list {

        margin-bottom: -15px!important;

    }

     

    .form-pagebreak {

        margin-top: -8px!important;

    }

  • Profile Image

    Answered by betwrestling on March 23, 2017 at 03:58 AM

    Thanks so much!

    One FINAL question then i promise to quit annoying you!

    What is the code to increase the space between the top of the form and the tabs?

  • Profile Image

    Answered by Ian on March 23, 2017 at 04:14 AM

    The following code should do the trick 

    ul#tabs-list {
    margin-top: 15px;
    }