PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How can I stack my 3 column layout?

  1. lukewatson81
    Member

    Hi there,
    On this form here http://5dollarsmokealarms.ey3host.com/contact-us/
    I am using the 3 column css ready classes Thirds (3 Columns)
    gf_left_third etc, however I can't seem to get the columns stacked correctly.
    I need the email to be under name, and phone and state to be under email etc and have the height of the comments box to be the height of the whole form?
    Can anyone help me?

    Posted 7 years ago on Tuesday April 3, 2012 | Permalink
  2. lukewatson81
    Member

    maybe I need 5 columns?

    Posted 7 years ago on Tuesday April 3, 2012 | Permalink
  3. I don't think you are going to find a ready class that will lay this out in this situation. It is possible though via CSS and targeting each li's #. I did something similar for a client of mine here:

    http://bit.ly/H6HRFV

    Is that the look you are going for?

    Posted 7 years ago on Tuesday April 3, 2012 | Permalink
  4. lukewatson81
    Member

    Thanks for the quick reply...i can't actually see anything in that link?
    Um I tried using #field_1_9 li {position:relative; margin-top:-150px;} in my css but it doesn't apply?
    What am I doing wrong?

    Posted 7 years ago on Tuesday April 3, 2012 | Permalink
  5. Try this one: http://grab.by/cURC

    #field_1_9 li would target the list item inside of #field_1_9. However, #field_1_9 is an li. So you should be able to use:

    [css]
    li#field_1_9 {}
    Posted 7 years ago on Tuesday April 3, 2012 | Permalink
  6. lukewatson81
    Member

    Can you do 4 columns?

    Posted 7 years ago on Tuesday April 3, 2012 | Permalink
  7. You may want to check out this topic.. if you want to do a more advanced column layout, you may need to make creative use of the HTML fields to introduce div wrappers to force the column layout. There is an example of what I'm talking about here.

    http://www.gravityhelp.com/forums/topic/textarea-will-make-extra-space-in-layout

    Posted 7 years ago on Tuesday April 3, 2012 | Permalink
  8. lukewatson81
    Member

    Thank you I think I have it now with applying individual classes, but one little problem now is my small, medium and large don't seem to be applying at all.
    For example, Name is Large and Country is medium , but they are they same length?

    Posted 7 years ago on Tuesday April 3, 2012 | Permalink
  9. yeah, the classes are being applied properly. The thing is that the small, medium and large input sizes are defined as percentages of the container width. If you make changes to the sizes of the containing elements anywhere, then naturally you're going to need to adjust the width values of those classes for the fields you changed.

    Posted 7 years ago on Tuesday April 3, 2012 | Permalink