https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap Gravity Support Forums Topic: Ready Classes columns overlap en-US Mon, 20 Apr 2026 06:07:05 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26393 Thu, 26 May 2011 11:51:28 +0000 Kevin Flahaut 26393@https://legacy.forums.gravityhelp.com/ <p>LOL. Okay, good luck with it. </p> https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26392 Thu, 26 May 2011 11:50:43 +0000 Jacob Smith 26392@https://legacy.forums.gravityhelp.com/ <p>Okay; obviously there are deeper issues here, but they're in my CSS and not GForms. Thanks again for the pointers; I'm off to get a crowbar. </p> https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26391 Thu, 26 May 2011 11:46:35 +0000 Kevin Flahaut 26391@https://legacy.forums.gravityhelp.com/ <p>maybe the line numbers didn't sync, but no, it's the rule I listed above being applied to the .gfield class. </p> https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26390 Thu, 26 May 2011 11:37:48 +0000 Jacob Smith 26390@https://legacy.forums.gravityhelp.com/ <p>Sorry for being dense - line 126 is the end of a block for header navigation:<br /> <pre><code>#nav li { display:inline; float:left; margin:0 0 0 37px; }</code></pre> <p>Is it that style bleeding into the content class? I didn't write this file and I'm having a hard time navigating the nests. Thanks for all the help. </p> https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26378 Thu, 26 May 2011 11:16:29 +0000 Kevin Flahaut 26378@https://legacy.forums.gravityhelp.com/ <p>That's being applied properly, the problem is with another rule on line 126 of your style.css file. You're setting a 20px left margin that's causing the odd stacking when you try to use the layout in 2 columns.</p> <pre><code>[css] .gfield { float: left; margin: 5px 0 0 20px !important; width: 270px; }</code></pre> <p>If I disable the left margin, you'll see that the layout works.</p> <p>screenshot: <a href="http://grab.by/adGH" rel="nofollow">http://grab.by/adGH</a></p> <p>You may want to revisit the CSS and apply a left margin to the main wrapper if you need that, or a padding to the containing div so everything looks centered properly in your content area.</p> <p>Hope that helps out. </p> https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26373 Thu, 26 May 2011 11:07:02 +0000 Jacob Smith 26373@https://legacy.forums.gravityhelp.com/ <p>Thanks for the clarification - I thought that might be it, and tried adding</p> <blockquote><p>#gform_wrapper_2.gform_wrapper li { padding:0 0 0 0 }</p></blockquote> <p>to the end our the site's CSS, but when that didn't work I thought I was on the wrong track. Is this the wrong format for that directive? </p> https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26329 Wed, 25 May 2011 16:52:15 +0000 Kevin Flahaut 26329@https://legacy.forums.gravityhelp.com/ <p>Usually when that happens it's because the theme styles apply margins or paddings to the list items that serve as the form field containers. The Ready Class widths are set as percentages to work a certain way, and if the list items inherit other properties that influence the width, then things get skewed and you get the odd "stacking" effect.</p> <p>The Ready Classes aren't "bulletproof" by any means.. they're just helper CSS classes that can still be superseded by the theme styling. </p> https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26328 Wed, 25 May 2011 16:40:03 +0000 Jacob Smith 26328@https://legacy.forums.gravityhelp.com/ <p>Ach, sorry; I put it back on the live form to 1-column for now, wasn't thinking.<br /> I'll have to dig through the CSS (it isn't mine) to see what's being applied. Thanks! </p> https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26322 Wed, 25 May 2011 16:23:57 +0000 Carl Hancock 26322@https://legacy.forums.gravityhelp.com/ <p>I don't see any Read Classes being output on the form you linked to. If Ready Classes aren't working properly it's going to be due to CSS being applied by your theme causing spacing issues, which can cause floats to wrap. </p> https://legacy.forums.gravityhelp.com/topic/ready-classes-columns-overlap#post-26315 Wed, 25 May 2011 16:00:54 +0000 Jacob Smith 26315@https://legacy.forums.gravityhelp.com/ <p>I could only find one other post about the fields staggering, and they were using some theme-specific hacks. I've tried to let this form</p> <p><a href="http://www.phillycarshare.org/gas-reimbursement-form" rel="nofollow">http://www.phillycarshare.org/gas-reimbursement-form</a></p> <p>have two columns, but instead they alternate down the page. If I set it to 3 columns and use just left and right, they're on the same row. Not sure how to fix this. </p>