https://legacy.forums.gravityhelp.com/topic/form-alignment-issues Gravity Support Forums Topic: Form alignment issues en-US Mon, 20 Apr 2026 06:28:44 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/form-alignment-issues#post-47759 Mon, 30 Jan 2012 11:44:02 +0000 Rob Harrell 47759@https://legacy.forums.gravityhelp.com/ <p>Awesome, glad to help out! And thanks for the kinds words too. :) </p> https://legacy.forums.gravityhelp.com/topic/form-alignment-issues#post-47757 Mon, 30 Jan 2012 11:38:56 +0000 claykitchens 47757@https://legacy.forums.gravityhelp.com/ <p>I would have never believed that I could receive a solution in this short amount of time. I can't thank you enough for your help and quick response time!!! Now I know why Gravity Forms is highly recommended! great product + great support </p> https://legacy.forums.gravityhelp.com/topic/form-alignment-issues#post-47755 Mon, 30 Jan 2012 11:26:30 +0000 Rob Harrell 47755@https://legacy.forums.gravityhelp.com/ <p>It looks like this page is not a full-width layout, it seems as though it could be columned. In your theme's css there is:</p> <pre><code>[css] #main, .home.page #main { width: 620px; padding: 3em 0 3em; }</code></pre> <p>It's setting that area to only be 620px wide. So your form description will align to that width. However, the description under the name - you can change this in your custom.css (rule you already have in place, we are just adding a width property):</p> <pre><code>[css] .gform_wrapper .gfield_description { padding: 0; width: auto; }</code></pre> https://legacy.forums.gravityhelp.com/topic/form-alignment-issues#post-47752 Mon, 30 Jan 2012 10:57:30 +0000 claykitchens 47752@https://legacy.forums.gravityhelp.com/ <p>That's it! Thank you!</p> <p>Now, it look looks like the gform_body needs to be widened to allow the description to span across the page. I've tried a couple of edits to widen it to 99.8%, but the attempts have been unsuccessful. Would you please point me in the right direction? </p> https://legacy.forums.gravityhelp.com/topic/form-alignment-issues#post-47751 Mon, 30 Jan 2012 10:37:12 +0000 Rob Harrell 47751@https://legacy.forums.gravityhelp.com/ <p>Ah ok, just an fyi - you don't want to edit forms.css in the plugin folder. So, since you are placing these in custom.css we will need to do overwrites. Try this out:</p> <pre><code>[css] .gform_wrapper .top_label .gfield_label { float: none !important; padding-right: 0 !important; width: auto !important; } .gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio { margin-left: 0 !important; }</code></pre> https://legacy.forums.gravityhelp.com/topic/form-alignment-issues#post-47750 Mon, 30 Jan 2012 10:25:05 +0000 claykitchens 47750@https://legacy.forums.gravityhelp.com/ <p>Thank you for your quick reply!</p> <p>It's almost as if there's something else preventing those CSS changes...</p> <p>I copied your code and pasted it into the custom.css file and refreshed, but there were no changes. So, I removed the code from custom.css and made the change to the actual forms.css with Coda. Still no change in the alignment after a refresh. Either I'm editing the wrong portion of the code in the forms.css, or something is preventing it from changing. </p> https://legacy.forums.gravityhelp.com/topic/form-alignment-issues#post-47747 Mon, 30 Jan 2012 09:44:17 +0000 Rob Harrell 47747@https://legacy.forums.gravityhelp.com/ <p>Your theme's CSS has gravity forms styles in it that are telling the labels to float left, which is why they are showing on the left:</p> <pre><code>[css] .gform_wrapper .top_label .gfield_label { display: block; float: left; padding-right: 20px; width: 100px; margin: 5px 0px 4px !important; }</code></pre> <p>This margin is causing your radio fields to indent as well:</p> <pre><code>[css] .gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio { margin-left: 120px !important; }</code></pre> <p>So you can edit those by dropping this in place of them:</p> <pre><code>[css] .gform_wrapper .top_label .gfield_label { display: block; margin: 5px 0px 4px !important; } .gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio {}</code></pre> https://legacy.forums.gravityhelp.com/topic/form-alignment-issues#post-47746 Mon, 30 Jan 2012 09:31:37 +0000 claykitchens 47746@https://legacy.forums.gravityhelp.com/ <p>My form is out alignment on this site - <a href="http://alpinecoc.org/contact-us/prayer-request/" rel="nofollow">http://alpinecoc.org/contact-us/prayer-request/</a><br /> The form style that I would like to have is here - <a href="http://mollermarketing.com/blogging-progress-report/" rel="nofollow">http://mollermarketing.com/blogging-progress-report/</a></p> <p>I've searched the forums and found a topic that addresses my issue, but didn't offer a solution -http://www.gravityhelp.com/forums/topic/why-is-the-formatting-off-alignment. I also looked at the topic that refers to the CSS Ready Classes, but it doesn't appear to have the right solution for me.</p> <p>I would like to have the form labels placed above the fields, but when I select that from the form settings, it doesn't appear to properly align them. I'm new to Gravity Forms and still fresh into CSS, so I'm not able to find the solution. We're using WooThemes Empire theme. All help is greatly appreciated!!! </p>