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)

  • 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.