-
davidbfgAsked on July 18, 2015 at 12:50 PM
There is currently excessive space at the top of the form and we have been unable to find a setting to decrease it.
Is there one?
Thank you,
David
-
jonathanReplied on July 18, 2015 at 5:16 PM
I have added this CSS code
.supernova {
margin-top: -75px;
}
on your jotform http://www.jotformeu.com/form/51912451493354
and moves the form upward to reduced the space on top
user guide: -How-to-Inject-Custom-CSS-Codes
Hope this help. Let us know if issue remains.
Thanks.
-
davidbfgReplied on July 18, 2015 at 5:45 PM
Hi Jonathan,
That looks much better.
Will a similar code close the gap at the bottom?
Thanks for your help, David
-
davidbfgReplied on July 20, 2015 at 5:54 AM
Hello Shadae,
Thanks for the margin code for the bottom of my form - I input the CSS but it doesn't seem to be changing anything.
It worked perfectly on the top, so it's probably something I'm doing wrong but I would appreciate a little more help (website url at the top of this thread).
Thanks, David
-
abajan Jotform SupportReplied on July 20, 2015 at 8:59 AM
Hi David,
If you look at Shadae's code carefully, you'll notice that it starts with a dot:
.supernova {
margin-bottom : -50px;
}The code in your form is missing that dot:
supernova {
margin-bottom : -50px;
}Once the dot is added, the desired change should take effect.
Please inform us if it does.
Cheers
-
davidbfgReplied on July 21, 2015 at 6:54 AMNew response receivedHello,
The addition of the dot doesn't seem to have changed it in Chrome.
I tried a couple of other negative values and nothing changed. It looks right in the preview but not in my browser.
Strange that the top code works and the bottom one doesn't - unless I've done something wrong again??
Further advice would be much appreciated.
Thank you,
David
... -
abajan Jotform SupportReplied on July 21, 2015 at 10:16 AM
My apologies, David. Please go into the form's Injected CSS and replace both of the previously added rules with the following:
.supernova {
margin-top: -30px;
}.jotform-form {
padding-top: 0;
padding-bottom: 0;
}When done, the margins should be like those in this clone.
I suggested going the injected CSS route instead of changing it in the Form Designer because in Chrome I noticed that when I cloned the form and tried to access the CSS tab in there (pictured below)
I wasn't able to see it because it was beyond the top of the Designer window. Perhaps there's something in the CSS which is causing this.
If you need further help with this, please inform us.
Thanks