How to remove white space at top of form

  • Profile Image
    wrafter
    Asked on January 11, 2012 at 09:18 AM

    Hi, I notice that every time I create a JotForm and embed it, there is always quite a large piece of white space (in height) above the top of the form, a good 50px or more. Is there any way that I can reduce that whitespace?
    (The whitespace always appears between the bottom of the preceeding content (on the site itself) and the top of the form embed script.)

    Thanks. (See attached)

    Screenshot
  • Profile Image
    abajan
    Answered on January 11, 2012 at 09:46 AM

    The space can be reduced by 20px if the following CSS is injected:

    .form-all {
    padding-top: 0;
    }

    Adding a margin-top property with a negative value to the above rule will reduce it further. For example, the second declaration of the following rule will reduce the space by a further 10px, making the total reduction 30px:

    .form-all {
    padding-top: 0;
    margin-top: -10px;
    }

    If you need clarification on anything, do let us know.

  • Profile Image
    wrafter
    Answered on January 11, 2012 at 10:43 AM

    That did work, thank you, very solid and informative reply.

  • Profile Image
    abajan
    Answered on January 11, 2012 at 11:08 AM

    Glad to be of assistance.

  • Profile Image
    virtualearth
    Answered on April 14, 2015 at 10:17 PM

    Hi Abajan,

    I added the cms above however not getting a result (remove or reduce padding above form).

    see: https://secure.jotformpro.com/form/51027081993961

    regards

    Brad

     

  • Profile Image
    yourhiphopbeats
    Answered on April 14, 2015 at 10:40 PM

    ╔═══╦╗─╔╦══╗╔═══╦═══╦═══╦══╦══╗╔═══╗

    ║╔═╗║║─║║╔╗║║╔═╗║╔═╗║╔═╗╠╣╠╣╔╗║║╔══╝

    ║╚══╣║─║║╚╝╚╣╚══╣║─╚╣╚═╝║║║║╚╝╚╣╚══╗

    ╚══╗║║─║║╔═╗╠══╗║║─╔╣╔╗╔╝║║║╔═╗║╔══╝

    ║╚═╝║╚═╝║╚═╝║╚═╝║╚═╝║║║╚╦╣╠╣╚═╝║╚══╗

    ╚═══╩═══╩═══╩═══╩═══╩╝╚═╩══╩═══╩═══╝

    WWW.youtube.com/YourHipHopBeats         WE UPLOAD DAILY!!!

  • Profile Image
    Kiran
    Answered on April 15, 2015 at 10:52 AM

    Brad, your query is moved to a separate thread and shall be addressed there shortly.

    http://www.jotform.com/answers/552959

     

  • Profile Image
    TheCloverClub
    Answered on December 15, 2015 at 08:14 PM

    Hello.

    I added the following rule to my CSS:

    .form-all {
    padding-top: 0;
    margin-top: -50px;
    }

    The -50px is perfect for desktop, but my mobile version needs a different padding because the top of the form gets hidden because the -50px padding is too small for mobile.

    Please advise how I can fix this.

  • Profile Image
    TheCloverClub
    Answered on December 15, 2015 at 09:24 PM

    Nevermind, I fixed it.

  • Profile Image
    Chriistian
    Answered on December 16, 2015 at 03:07 AM

    Hi,

     

    We are glad to know that you have fixed the issue yourself.

     

    Do inform us if you have any other questions regarding jotform.                                                    

    Regards,

  • Profile Image
    tps01930
    Answered on February 15, 2016 at 11:21 AM

    I'm having trouble removing this top margin using the information provided above.

    http://turningpointsystems.com/contact-ems/

    .form-all {
    padding-top: 0;
    margin-top: -50px;
    }

    Any ideas?


    Thanks.


    Chris Jaeger

     

  • Profile Image
    Charlie
    Answered on February 15, 2016 at 12:28 PM

    @tps01930

    I see you already have opened your own separate thread for your concern. Please refer to this link instead: http://www.jotform.com/answers/772585. We will answer your inquiry directly there. Thank you for your understanding.

  • Profile Image
    pilgrimparking
    Answered on January 17, 2017 at 02:22 PM

     

    UPDATE: I've now asked my below question in a new post here: https://www.jotform.com/answers/1037222

    -------------------------------------------------------------------------------------

     

    As TheCloverClub said, I too am having the issue of the top little bit of my form being cut off when viewed on a mobile device after inserting this CSS code:

    .form-all {
        padding-top : 0;
        margin-top : -60px;
    }

     

    Is there any way to code it so that it reduces the top margin by less on mobile devices?  TheCloverClub said he fixed it but never said how.

  • Profile Image
    pilgrimparking
    Answered on January 17, 2017 at 02:26 PM

    I didn't mean to post twice.. it said the first one didn't work.  This comment can be deleted.