https://legacy.forums.gravityhelp.com/topic/thirds-3-columns-css-not-aligning Gravity Support Forums Topic: Thirds (3 Columns) CSS not Aligning en-US Wed, 15 Apr 2026 03:31:23 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/thirds-3-columns-css-not-aligning#post-258132 Fri, 17 May 2013 15:01:31 +0000 Richard Vav 258132@https://legacy.forums.gravityhelp.com/ <p>You're welcome </p> https://legacy.forums.gravityhelp.com/topic/thirds-3-columns-css-not-aligning#post-258127 Fri, 17 May 2013 14:58:28 +0000 RobOrillia 258127@https://legacy.forums.gravityhelp.com/ <p>Hey Richard, I am not a developer but will pass your valuable comments about JQuery along to him.</p> <p>You Rock!</p> <p>Thanks for being so thorough with your responses.</p> <p>R </p> https://legacy.forums.gravityhelp.com/topic/thirds-3-columns-css-not-aligning#post-258011 Fri, 17 May 2013 13:31:30 +0000 Richard Vav 258011@https://legacy.forums.gravityhelp.com/ <p>Sorry about that, try adding the !important flag like so<br /> <pre><code>.gform_wrapper ul li { padding-left: 0 !important; }</code></pre> <p>One other thing I should point out, if you view the source of your page you will find the following near the top, I assume it is hard coded into your header.php file<br /> <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.8.3.min.js&quot;&gt;&lt;/script&gt;</code></pre> <p>A little further down just after the stylesheets are included you have a second copy of jQuery being included, I presume by the wp_head function.<br /> <pre><code>&lt;script type=&#39;text/javascript&#39; src=&#39;http://stonegateinn.com/wp-includes/js/jquery/jquery.js?ver=1.8.3&#39;&gt;&lt;/script&gt;</code></pre> <p>It is a bad idea to include jQuery multiple times, it can and is causing issues such as the JavaScript errors being reported by Chrome's developer console, I would recommend removing the first copy and leaving the wp_head function to include it.</p> <p>Regards,<br /> Richard </p> https://legacy.forums.gravityhelp.com/topic/thirds-3-columns-css-not-aligning#post-257953 Fri, 17 May 2013 12:53:35 +0000 RobOrillia 257953@https://legacy.forums.gravityhelp.com/ <p>Thanks a lot Richard! For some reason this has no effect on the form.<br /> Here is all the GF css I am using now in the base.css stylesheet.</p> <pre><code>body .gform_wrapper input[type=text], body .gform_wrapper input[type=url], body .gform_wrapper input[type=email], body .gform_wrapper input[type=tel], body .gform_wrapper input[type=number], body .gform_wrapper input[type=password], body .gform_wrapper textarea { border: 1px solid #4A6768!important; height: 20px; max-width: 299px; border-radius: 5px; } body .gform_wrapper select { max-width: 299px; border: 1px solid #4A6768!important; height: 30px; border-radius: 5px; } .gform_wrapper .top_label li.gfield.gf_right_half { width: 48% !important; } .gform_wrapper { display:auto !important; } .gform_wrapper ul li { padding-left: 0; }</code></pre> <p>Let me know if there is anything else we can do.</p> <p>Thank you,</p> <p>Rob </p> https://legacy.forums.gravityhelp.com/topic/thirds-3-columns-css-not-aligning#post-257860 Fri, 17 May 2013 11:56:27 +0000 Richard Vav 257860@https://legacy.forums.gravityhelp.com/ <p>Hi Rob,</p> <p>Your theme's stylesheet is adding 10 pixel padding to the left side of the list element that contains the form fields which means they are wider than they should be resulting in not enough room for your third field forcing it to drop down. </p> <p>You can counteract it by adding the following towards the bottom of your theme's style.css file or wherever you are instructed to place custom css.<br /> <pre><code>.gform_wrapper ul li { padding-left: 0; }</code></pre> <p>Regards,<br /> Richard </p> https://legacy.forums.gravityhelp.com/topic/thirds-3-columns-css-not-aligning#post-257837 Fri, 17 May 2013 11:36:56 +0000 RobOrillia 257837@https://legacy.forums.gravityhelp.com/ <p>Hi there: I was hoping I could get a bit of help with an alignment issue I continue to experience. On the third on (gf_right_third) it jumps down thus breaking the beautiful horizontal alignment. The page is here (scroll down) but I cannot leave it up long <a href="http://stonegateinn.com/hotel-packages/opera-house-theater-getaway-package/" rel="nofollow">http://stonegateinn.com/hotel-packages/opera-house-theater-getaway-package/</a></p> <p>Actually what I am really looking for is seen at the top of the same page " Nights-Adults-Children" tightly nested together. </p> <p>Whatever is doable, I want it to look nice and the alignment problem I am experiencing does not.</p> <p>Any words of wisdom are much appreciated.</p> <p>Thanks,</p> <p>Rob </p>