How can I reduce the gap at the top of the Form

  • Profile Image
    cddweb
    Asked on March 19, 2015 at 12:58 PM
  • Profile Image
    david
    Answered on March 19, 2015 at 02:19 PM

    Hi,

    Try injecting this CSS to your form:

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

    .form-all {

      padding-top: 0px;

      margin-top: -50px;

    }

    That should greatly reduce the space at the top of your form.  You can adjust the values to your liking.

    If you have any further questions, let us know and we will be happy to help.

     

  • Profile Image
    cddweb
    Answered on March 20, 2015 at 06:29 AM

    Thanks. I found that this cropped the top of the form when on a smaller screen, so I found the top margin for the larger screen and edited that. I am having a problem with the header when on a small screen. I can't find the code for the heading at smaller screen sizes in the Form Styles> Inject Custom CSS. Can you direct me please. The font and size changes in a way I don't like. Thanks

  • Profile Image
    EltonCris
    Answered on March 20, 2015 at 11:20 AM

    @cddweb 

    Instead of using the previous codes, use this so it does not get cut on the top on small screens.

    .jotform-form{padding:10px 0;}

    Feel free to adjust 10px to your preference.

    Regarding on the font changes, that's how the mobile theme works, the one you are currently using in your form. You might want to switch to "Nova Theme" to resolve that problem. You can set it under your form preferences.

    Thanks!

  • Profile Image
    cddweb
    Answered on March 20, 2015 at 12:19 PM

    that's great! I hadn't realised it had a theme! Thanks for all your help JotForm looking good.

  • Profile Image
    EltonCris
    Answered on March 20, 2015 at 12:37 PM

    Glad it helps. Cheers! :)