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

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
Alan_D
Answered on May 02, 2019 at 05:14 PM

I think you are talking about this question.The 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
}
The form will be seen like that.
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.
John

Jotform Support

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:
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;
}
Before: After: You can also set the padding as "0".
padding-top: 0px !important;
But I think 10px padding is better-looking.