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

    How to remove the extra space on top of the form when viewed from an iPad device?

    Asked by tycoprinting on September 07, 2016 at 12:50 PM

    We have a form located at http://www.tycousa.net/page/bound-books

    It is also at https://form.jotform.com/62446100634144

    When viewed on an iPad an extra space is inserted before the form (see attached screen shot).  We've tried a lot of different things but with no luck in removing that space.  In desktop and iPhone mode it works fine.

     

    Thank you.

    Screenshot
    ipad extra space css inject css
  • Profile Image
    JotForm Support

    Answered by Jim_R on September 07, 2016 at 02:26 PM

    Although I don't have an actual iPad to test it with, I was able to replicate the extra spacing through an iPad emulator. To fix this, can you try the following CSS Codes:

    @media only screen 

      and (min-device-width: 768px) 

      and (max-device-width: 1024px) 

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

        .jotform-form {

          padding: 0;

    }

    The result should look something like this:

    Here's how/where to inject the CSS Codes:

    Please keep us posted if it worked or not.

  • Profile Image

    Answered by tycoprinting on September 07, 2016 at 03:50 PM

    Thank you.  That worked on the iPad but for some reason it doesn't work when on a computer with a scaled down browser window.  Is there a fix for that?

     

    Also, how do i get more space above the header "Request Info & Pricing" and below the top border line.

     

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Kiran on September 07, 2016 at 06:32 PM

    That worked on the iPad but for some reason it doesn't work when on a computer with a scaled down browser window.  Is there a fix for that?

    If you are resizing the browser window than the min device length specified in the injected CSS code, the default settings will be applied. If you can let us know to what size you are resizing the window so that we can provide you with the CSS code.

    how do i get more space above the header "Request Info & Pricing" and below the top border line.

    Please inject the following CSS code to your JotForm so that some space will be displayed above the header as shown below:

    #cid_10 {

        padding-top: 20px !important;

    }

    Hope this information helps! 

  • Profile Image

    Answered by tycoprinting on September 12, 2016 at 03:07 PM

    Thank you but the code for top padding did not work for our form.  Is #cid_10 the correct identifier?  How do we confirm that?

     

     

  • Profile Image
    JotForm Support

    Answered by Jan on September 12, 2016 at 05:38 PM

    The #cid_10 is the correct CSS selector. It is not working because you are missing a curly brace in line 57. Please try inserting a "}" above the #cid_10.

    Now, for the top space, you can insert this CSS code to remove it.

    @media screen and (min-width: 768px) {
    .jotform-form {
    padding: 0px 0 !important;
    }
    }

    @media screen and (max-width: 768px) and (min-width: 480px) {
    .jotform-form {
    padding: 0px 0 !important;
    }
    }

    You might also want to re-embed the form using the Iframe method if the embedded form is not responsive. Here's a guide: Getting-the-form-iFrame-code.

    Hope that helps. Thank you.