Reduce the top spacing of the form

  • Profile Image
    dogboy
    Asked on February 05, 2015 at 04:12 AM
    I came on here to ask this exact same question.  The "margin-top: -90px" css worked fine for the form on my website, but now the top of the same form embedded on Facebook is cut off by about 90px.
  • Profile Image
    Welvin
    Answered on February 05, 2015 at 04:15 AM

    Hi,

    If possible, please post your Facebook page here and your website so we can check both.

    Thanks

  • Profile Image
    dogboy
    Answered on February 05, 2015 at 09:48 AM

    Hi, here is the url to both forms:

    website: http://www.localdogrescue.com/adoptionapp.html

    facebook: https://www.facebook.com/localdogrescue/app_684336108254110

     

    ps - I injected -80px, not -90px...

  • Profile Image
    david
    Answered on February 05, 2015 at 12:05 PM

    Hi,

    Since adding -80px to the top of the form does indeed move it up by 80 pixels, you may need to reduce the value to suit your Facebook page.  You could also clone your form:

    http://www.jotform.com/help/27-How-to-Clone-an-Existing-Form

    Then have two different versions, one with a margin that suits your website and one with a margin that suits your Facebook page. 

    All the code from the previous thread does it move the whole form up 90 pixels.  It is working as it should.  In your cloned version, remove that line and re-embed it to your Facebook page.  Your form should then fit properly.  You can also try this CSS to adjust the top padding of your form, instead of using the margin.  This may work for both your webpage AND your Facebook page:

    .jotform-form {
    padding: 0 !important;
    }

     

  • Profile Image
    dogboy
    Answered on February 05, 2015 at 04:36 PM

    Thanks David, I removed the "margin-top" css and used the .jotform-form {padding: 0!important;} method instead and that worked great on both my website and the facebook page. 

    I had noticed on my website that padding on the jotform form was set to 90px top and bottom so was wondering why we were using the margin-top method to reduce that.

    Thanks

  • Profile Image
    Welvin
    Answered on February 05, 2015 at 05:04 PM

    That's great to know and glad that we could help.

    The top margin method is also useful if you need to adjust the top spacing for certain web pages, depending on the website container.

    But in all cases, the top padding should be the solution.

    Thank you!