https://legacy.forums.gravityhelp.com/topic/move-widget-fields-closer-together Gravity Support Forums Topic: Move Widget Fields Closer Together en-US Wed, 22 Apr 2026 01:36:21 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/move-widget-fields-closer-together#post-45047 Wed, 28 Dec 2011 06:30:20 +0000 Ken11 45047@https://legacy.forums.gravityhelp.com/ <p>Cheers Rob... I'll check it out. Thx. </p> https://legacy.forums.gravityhelp.com/topic/move-widget-fields-closer-together#post-44996 Tue, 27 Dec 2011 13:09:39 +0000 Rob Harrell 44996@https://legacy.forums.gravityhelp.com/ <p>Hey ken, no problem. I used Chrome Developer Tools to inspect the markup and see where the spacing was coming from. You can also use Firebug for Firefox to troubleshoot as well.</p> <p>The li is an HTML element called List Item. Our forms are structured using the li element for each field. Your theme had a declaration for your sidebar li that was taking precedence, so we overwrote that using classes that are output by Gravity Forms. </p> https://legacy.forums.gravityhelp.com/topic/move-widget-fields-closer-together#post-44988 Tue, 27 Dec 2011 11:44:50 +0000 Ken11 44988@https://legacy.forums.gravityhelp.com/ <p>Thanks Rob - it worked great. Just 2 further questions on your code if I may...<br /> 1) In line 1 - How did you know to go for the bottom margin in the "Heading" rather than the top margin in the "Body"? (I tried the body myself with no result)<br /> 2) In line 4 - I do not understand the "li" command. What does it mean and how is it used?<br /> OK, really 3 questions ;-) Thx again, Ken. </p> https://legacy.forums.gravityhelp.com/topic/move-widget-fields-closer-together#post-44984 Tue, 27 Dec 2011 08:24:52 +0000 Rob Harrell 44984@https://legacy.forums.gravityhelp.com/ <p>Try this out, place this in your theme's stylesheet:</p> <pre><code>[css] .gform_widget .gform_heading { margin-bottom: 0 !important; } .gform_widget li { margin-bottom: 0 !important; } .gform_widget .gfield_label { margin-top: 5px !important; }</code></pre> <p>See if that works for you - I don't think moving your labels to the left is ideal here because the input fields would result to being extremely small in width because of the narrowness of the form. </p> https://legacy.forums.gravityhelp.com/topic/move-widget-fields-closer-together#post-44980 Tue, 27 Dec 2011 05:18:27 +0000 Ken11 44980@https://legacy.forums.gravityhelp.com/ <p>I have created a GF Widget in a Thesis sidebar - see <a href="http://www.helpwithmaths.com.au" rel="nofollow">http://www.helpwithmaths.com.au</a><br /> My goal is to shrink the form length as much as possible. I have managed to do this to a certain degree by adjusting top and bottom margins/padding of the heading and footer (by following other posts in this forum). But I have not been able to find anything that works on my site to reduce the spacing between the body fields.<br /> Can someone please advise me how to...<br /> 1) Reduce the white space between the fields, and<br /> 2) Move the labels in Name and Email to the left of their fields so the form can be shortened even further.<br /> Thanks in advance, Ken. </p>