https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css Gravity Support Forums Topic: Reduce Gravity Forms height in CSS en-US Mon, 20 Apr 2026 04:50:06 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-31155 Thu, 28 Jul 2011 16:52:21 +0000 Kevin Flahaut 31155@https://legacy.forums.gravityhelp.com/ <p>Gloria,</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-31139 Thu, 28 Jul 2011 12:44:21 +0000 gepijac 31139@https://legacy.forums.gravityhelp.com/ <p>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.<br /> Cheers,<br /> Gloria </p> https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-31135 Thu, 28 Jul 2011 12:05:22 +0000 Kevin Flahaut 31135@https://legacy.forums.gravityhelp.com/ <p>@gepijac,</p> <p>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.</p> <pre><code>[css] ul.sidebar li .gform_wrapper ul li { margin: 0!important; }</code></pre> <p>You would target textareas like this.. taken from the example in the documentation.</p> <pre><code>[css] body .gform_wrapper .gform_body .gform_fields .gfield textarea { border:1px solid red }</code></pre> <p>or if you want to target the specific textarea in your sidebar widget, it would be like this.</p> <pre><code>[css] body .gform_wrapper .gform_body .gform_fields .gfield textarea#input_8_7 { height:50px; }</code></pre> https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-31133 Thu, 28 Jul 2011 11:46:43 +0000 gepijac 31133@https://legacy.forums.gravityhelp.com/ <p>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:</p> <p><a href="http://testsite.fanfaire.com/thibaudet-jytbio" rel="nofollow">http://testsite.fanfaire.com/thibaudet-jytbio</a></p> <p>Also, what's the CSS for reducing the size of the text area? Would greatly appreciate any help. Thanks!<br /> -Gloria </p> https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-20823 Fri, 18 Mar 2011 12:00:36 +0000 Kevin Flahaut 20823@https://legacy.forums.gravityhelp.com/ <p>Try adding this to the end of your theme's style.css file</p> <pre><code>.footer-widget .gform_wrapper ul li { padding: 0; background-image: none; } #gform_wrapper_2.gform_wrapper .gform_footer { padding: 0; }</code></pre> <p>screenshot: <a href="http://grab.by/9y5c" rel="nofollow">http://grab.by/9y5c</a> </p> https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-20815 Fri, 18 Mar 2011 11:14:08 +0000 travin 20815@https://legacy.forums.gravityhelp.com/ <p><a href="http://www.freeclassifiedproducts.com" rel="nofollow">http://www.freeclassifiedproducts.com</a></p> <p>Left out the "i", sorry. </p> https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-20798 Fri, 18 Mar 2011 00:44:56 +0000 Kevin Flahaut 20798@https://legacy.forums.gravityhelp.com/ <p>@travin, I can't see your form page to help out.</p> <p><a href="http://grab.by/9xJ7" rel="nofollow">http://grab.by/9xJ7</a> </p> https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-20793 Thu, 17 Mar 2011 23:29:11 +0000 travin 20793@https://legacy.forums.gravityhelp.com/ <p>So I used the above code to reduce the spacing of my "Tell A Friend" form found at the bottom of the page here: <a href="http://www.freeclassifedproducts.com" rel="nofollow">http://www.freeclassifedproducts.com</a></p> <p>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.</p> <p>Thanks in advance </p> https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-3693 Tue, 02 Mar 2010 11:23:44 +0000 dysell 3693@https://legacy.forums.gravityhelp.com/ <p>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!</p> <p>Robert </p> https://legacy.forums.gravityhelp.com/topic/reduce-gravity-forms-height-in-css#post-3688 Tue, 02 Mar 2010 10:14:15 +0000 Kevin Flahaut 3688@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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.</p> <p>You can start off by adding this to the bottom of your theme style sheet.</p> <pre><code>.gform_wrapper .top_label .gfield_label { margin:2px 0 2px 0!important; }</code></pre> <p>Tweak the values to your preference. Here's a <a href="http://grab.by/2M2w" rel="nofollow">screenshot</a> of my test form with that one change.</p> <p>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.</p> <p>Hope that points you in the right direction. </p>