I would like to know how to reduce the top margin of my JotForms

  • Profile Image
    lynnephelps
    Asked on May 02, 2019 at 03:03 PM

    I too would like to know how to reduce the top margin of my JotForms. I can't see the answer below, it is restricted.



    This is a re-post of a comment on How to Inject Custom CSS Codes

  • Profile Image
    Alan_D
    Answered on May 02, 2019 at 05:14 PM

    I think you are talking about this question.15568308222.pngThe user has set the thread as private. That is why you didn't see the answer.
    I can see you have created only one form.
    https://www.jotform.com/91207277088967
    In fact, your form has 103px top margin space. You can inject this code into the form CSS to reduce the top margin of the form.
    div[role="main"] {
    margin-top:50px !important
    }
    15568315473.pngThe form will be seen like that.
    15568315732.png

  • Profile Image
    lynnephelps
    Answered on May 23, 2019 at 08:59 AM

    I put the code into the form designer CSS, but I don't see any difference in my top margin. I tried reducing the value from 50 to 25 to 5. You can see my form embedded here:

    https://www.sy-klone.com/cleancabair-b

    The distance from the top of the form panel to the first form text "Tell Me More" remains the same.

  • Profile Image
    JohnRex
    Answered on May 23, 2019 at 10:42 AM

    Try using the following CSS code and kindly advise if it works:

    .form-header-group {

        padding:0;

    }

    I tried to clone your form and here's how it goes when I add the above code:


    1558622517Capture3.JPG

  • Profile Image
    Alan_D
    Answered on May 23, 2019 at 10:49 AM

    In fact, all forms may need specific CSS codes. All codes do not have to work with all forms. Please use this code to reduce the margin of your form.
    div[role="main"] {
    margin-top: 0px !important;
    }
    #cid_13 div.form-header-group {
    margin-top: 0px !important;
    padding-top: 10px !important;
    }
    15586226643.pngBefore: 15586226992.pngAfter: 15586227411.pngYou can also set the padding as "0".
    padding-top: 0px !important;
    But I think 10px padding is better-looking.