https://legacy.forums.gravityhelp.com/topic/adding-4-column-layout-tip Gravity Support Forums Topic: Adding 4 Column Layout Tip en-US Sat, 04 Apr 2026 05:06:53 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/adding-4-column-layout-tip#post-65830 Wed, 11 Jul 2012 17:45:11 +0000 PowerMedia 65830@https://legacy.forums.gravityhelp.com/ <p>That did the trick! Thanks for the help!!!! </p> https://legacy.forums.gravityhelp.com/topic/adding-4-column-layout-tip#post-65819 Wed, 11 Jul 2012 17:13:57 +0000 Kevin Flahaut 65819@https://legacy.forums.gravityhelp.com/ <p>@PowerMedia, </p> <p>Try typing the class names in manually rather than pasting them in the fields. Some browsers get a bit weird about pasting them in and it usually remedies the problem. </p> https://legacy.forums.gravityhelp.com/topic/adding-4-column-layout-tip#post-65781 Wed, 11 Jul 2012 11:42:12 +0000 PowerMedia 65781@https://legacy.forums.gravityhelp.com/ <p>Thanks for sharing this corradomatt! However, I'm having a problem. I added your code into my child css and added your "gf_one_quarter" to the CSS Class Name. I added "gf_one_quarter gf_quarter_last" to the CSS Class Name in my last field. It doesn't accept the changes. Any suggestions? </p> <p><a href="http://carroll.powermediallc.org/coaches/game-results/" rel="nofollow">http://carroll.powermediallc.org/coaches/game-results/</a> </p> https://legacy.forums.gravityhelp.com/topic/adding-4-column-layout-tip#post-61413 Tue, 05 Jun 2012 01:35:09 +0000 corradomatt 61413@https://legacy.forums.gravityhelp.com/ <p>Ah yes...absolutely - thanks Rob, it must have been late when I posted that one! </p> https://legacy.forums.gravityhelp.com/topic/adding-4-column-layout-tip#post-61210 Sun, 03 Jun 2012 07:49:12 +0000 Rob Harrell 61210@https://legacy.forums.gravityhelp.com/ <p>Thanks for posting! I edited your post at the top as people should not edit the forms.css file because plugin updates will overwrite it. Custom CSS (even for the plugin) should go into the theme's stylesheet or into a place in the theme that won't get overwritten automatically. </p> https://legacy.forums.gravityhelp.com/topic/adding-4-column-layout-tip#post-61199 Sat, 02 Jun 2012 13:50:41 +0000 corradomatt 61199@https://legacy.forums.gravityhelp.com/ <p>Hey everyone, I've been using GF for a while now and love the product. I recently had a need for a 4 column layout and created new css ready classes to create this layout. There are already a few posts from people wanting 4 column support but I didn't see any solutions on the forums that I liked. So I figured I would share my solution here....</p> <p>Add the following to your theme's CSS file (to avoid plugin update overrides).<br /> <pre><code>/* 4 column ready class ------------------------------------------------------*/ .gform_wrapper .top_label li.gfield.gf_one_quarter { float:left; margin-right: 4%; width: 22%; clear:right !important; } .gform_wrapper .top_label li.gfield.gf_quarter_last { margin-right:0; } .gform_wrapper .top_label li.gfield.gfield_error.gf_one_quarter { width: 18% } .gform_wrapper .top_label li.gfield.gf_one_quarter input.medium, .gform_wrapper .top_label li.gfield.gf_one_quarter input.large, .gform_wrapper .top_label li.gfield.gf_one_quarter select.medium, .gform_wrapper .top_label li.gfield.gf_one_quarter select.large { width: 95% } .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gsection, .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gsection { padding: 16px 0 8px 0 } .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gfield, .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gfield, .gform_wrapper .top_label li.gfield.gf_one_quarter+li.gfield, .gform_wrapper .top_label li.gfield.gf_one_quarter+.gform_footer, .gform_wrapper .top_label li.gfield.gf_one_quarter+.gform_footer, .gform_wrapper .top_label li.gfield.gf_one_quarter+.gform_footer { clear: both }</code></pre> <p>Then add <u>gf_one_quarter</u> to your fields css class name for each of the 4 columns. For the last column, enter <u>gf_one_quarter</u> and <u>gf_quarter_last</u><br /> <hr /><br /> I wanted the 4 column layout to display well no matter how wide the form was displayed, so I used only % widths for the columns and the padding. I also wanted to take up as few lines of code as possible (my 4 column is 6 lines vs. GF 2 columns being 13) - so I approached the issue of the individual columns a little differently. Instead of naming each column separately (ie gf_left_third, gf_middle_third, gf_right_third) I simply name each 1/4 column "gf_one_quarter". The difference is when you add the css class for the last column, you must enter "gf_one_quarter gf_quarter_last". The "gf_quarter_last" removes the unnecessary right margin from the last column.</p> <p>I haven't tested the above code in all scenarios (and I'm definitely no css expert) but it works well for my form. If you use this, let me know if you find any display issues and I'll see if I can help refine the code. </p>