CSS issue: Padding is being added to the top and bottom of my jotform

I am still curious as to where all the white space is coming from above and below the form as it appears on my webpage. Could you take a look please?
http://www.huntingdonguitarteacher.co.uk/contact.html

Thanks, although the white space is still in the document.

Yep, that's solved it. Thanks! :)

We're glad to see that the suggested code worked for you.

Please let us know if we can be of further assistance.

Thanks.

Neither of these suggestions worked for me - is something else in my code putting the large chunk of padding at the bottom?

 

@ira7, 

I have edited your post and removed the CSS codes you posted since we would be able to see that on your form when we check it, so it is not necessary for you to post your form CSS codes here.

However, I have inspected the CSS codes you provided and I cannot really tell where those large paddings coming from. It is possible that we need to add something to your code in order for us to accomplish your desired outcome. 

If you could help us by giving us the link to your web page where you used your form or if you could give us the URL of your form so we would be able to check it further. You may have many forms on your account and I will not be able to know the form you are talking about in particular. Thank you. 

Hi There,

You can see it on http://www.jotform.com//?formID=51245383918157- it is entitled LA Design Request Form.

 

Thanks!

Lauren

After checking your form, I have found out that you already placed these codes in it. (Please see image below)

This would actually solve the issue, however, there are some codes that conflict the padding-top: 0px and the padding-bottom: 0px. (Please see image below)

There is no need to delete the codes above to accomplish your goal, you could just add the "!important" syntax to padding-top and padding-bottom of the .jotform{} so that it will ignore the other values you set for padding.  (Please see image below)

By the way, the instruction above pertains to the large space at the top and bottom of the forms, not the spaces between fields on the form. 

Thank you! Your response makes perfect sense. Unfortunately, this did not seem to fix that problem at the bottom. See my form in action at: http://laurenacamporadesign.com/design-request-form (password = laurenfromduke)

I have checked your web page and found this. 

However, I have tried embedding it to one of my sample web pages and it worked perfectly fine. When I used the typical Embed option from the Embed Form Wizard. The extra space at the bottom was removed.

I understand that you were using iFrame and what you can do is re-embed your form using iFrame but, this time, remove the script part of the iFrame code as that might conflict with the height you set on your form. (Please see image below)

The iFrame code allows you to edit the height of the form. 

You can, of course, set it to your own preference. You can also add the "!important", just to ignore any other conflict. Like, height: 1700px !important;

Thank you so much!! I set the height to 100% in my iframe html and that did the trick.