Reduce Gravity Forms height in CSS « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

dysell
Member

I'm sorry to have to post this. But I just can't seem to decrease the distance in height between my fields and thus, the whole form alltogheter. I want it to be tighter in general.

Which CSS should I edit?

Posted 14 years ago on Tuesday March 2, 2010 | Permalink
Kevin Flahaut
Administrator
Depending on your form orientation (top label, left label, etc.) different values will affect the spacing.. for a default top label type form, the field label margins are the biggest influence.

As far as which CSS, you'll want to make any custom CSS changes/additions in your theme style sheet and not directly in the CSS in the Gravity Forms folder. That way you can avoid losing any information when you run the automatic updates.

You can start off by adding this to the bottom of your theme style sheet.
```
.gform_wrapper .top_label .gfield_label {
	margin:2px 0 2px 0!important;
}
```
Tweak the values to your preference. Here's a screenshot of my test form with that one change.

If you have a lot of customization to do, you may want to copy the entire contents of the forms.css file in the Gravity Forms folder, append that to the bottom of your theme style sheet and then go into the Gravity Forms settings page and uncheck the "output css" option. This will disable the default style sheet and let you comfortably customize all the css from the theme style sheet.

Hope that points you in the right direction.
Posted 14 years ago on Tuesday March 2, 2010 | Permalink
dysell
Member

Thanks! It does put me in the right direction. I am gonna tweak away now :) I will be back if I have more questions. Quick response you guys!

Robert

Posted 14 years ago on Tuesday March 2, 2010 | Permalink
travin
Member

So I used the above code to reduce the spacing of my "Tell A Friend" form found at the bottom of the page here: http://www.freeclassifedproducts.com

I need smaller spacing between the fields if possible and also need to make the submit button shift up. I tried adding the .gform footer bit but guess I didn't get that right.

Thanks in advance

Posted 13 years ago on Friday March 18, 2011 | Permalink
Kevin Flahaut
Administrator

@travin, I can't see your form page to help out.

http://grab.by/9xJ7

Posted 13 years ago on Friday March 18, 2011 | Permalink
travin
Member

http://www.freeclassifiedproducts.com

Left out the "i", sorry.

Posted 13 years ago on Friday March 18, 2011 | Permalink
Kevin Flahaut
Administrator
Try adding this to the end of your theme's style.css file
```
.footer-widget .gform_wrapper ul li {
    padding: 0;
    background-image: none;
}

#gform_wrapper_2.gform_wrapper .gform_footer {
    padding: 0;
}
```
screenshot: http://grab.by/9y5c
Posted 13 years ago on Friday March 18, 2011 | Permalink
gepijac
Member

I'm relatively new to Gravity Forms and I love it! Have already created a handful of forms for an html site that I'm converting to WordPress. One of the forms is a poll in a sidebar widget that I've been trying to make more compact by decreasing the spacing between the fields. I've customized the font properties and shifted the position of the submit button using the CSS in your "targeting specific elements" post. However, I've been unable to reduce the spacing between the fields. I'm sure it's no big deal, but it seems I'm missing something. Here's the URL of the test page:

http://testsite.fanfaire.com/thibaudet-jytbio

Also, what's the CSS for reducing the size of the text area? Would greatly appreciate any help. Thanks!
-Gloria

Posted 13 years ago on Thursday July 28, 2011 | Permalink
Kevin Flahaut
Administrator
@gepijac,

Your form is inheriting some margins from the Theme thats adding a little extra spacing between your fields. You can add this to your custom CSS to override that.
```
[css]
ul.sidebar li .gform_wrapper ul li {
    margin: 0!important;
}
```
You would target textareas like this.. taken from the example in the documentation.
```
[css]
body .gform_wrapper .gform_body .gform_fields .gfield textarea
{
	border:1px solid red
}
```
or if you want to target the specific textarea in your sidebar widget, it would be like this.
```
[css]

body .gform_wrapper .gform_body .gform_fields .gfield textarea#input_8_7
{
	height:50px;
}
```
Posted 13 years ago on Thursday July 28, 2011 | Permalink
gepijac
Member

Thanks, Kevin. With your suggestions, am sure something will work out with a little more tweaking on my part. BTW, I'm using Headway Themes.
Cheers,
Gloria

Posted 13 years ago on Thursday July 28, 2011 | Permalink
Kevin Flahaut
Administrator

Gloria,

Headway Theme's are great and they have a great support team. I think you've chosen wisely there. Let us know if we can help out with anything else.

Posted 13 years ago on Thursday July 28, 2011 | Permalink