I would like to know how to reduce the top margin of my JotForms
-
lynnephelpsAsked 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_DAnswered 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.
-
lynnephelpsAnswered 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.
-
JohnAnswered on May 23, 2019 at 10:42 AMJotform Support
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_DAnswered 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.