Support » Plugin: Multiple Columns for Gravity Forms » Option for Custom Column Widths?

  • Resolved touchdowntech

    (@touchdowntech)


    I would love the option to have a 2-column layout where the first column is 2/3 and the second is 1/3. Or a 3-column layout where the first column is 1/4 the middle column is 1/2 and the right column is 1/4.

    Is it possible to do this already?

    • This topic was modified 3 months, 1 week ago by  touchdowntech.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author WebHolism

    (@webholism)

    Hi touchdowntech,

    Thanks for trying the plugin, and getting in touch.

    If you could try adding the following CSS to your styles for the two column spacing you require:

    [class*=”col-1-of-2″] {
    width: 66% !important;
    }
    [class*=”col-2-of-2″] {
    width: 34% !important;
    }

    For the three column layout, try:

    [class*=”col-1-of-3″] {
    width: 25% !important;
    }
    [class*=”col-2-of-3″] {
    width: 50% !important;
    }
    [class*=”col-3-of-3″] {
    width: 25% !important;
    }

    If that does not yield the results that you are hoping, please could you take an export of your form using the Gravity Forms instructions found at: https://docs.gravityforms.com/exporting-a-form-from-gravity-forms/, and send it through to hello@webholism.com?

    Thank you, and wishing you a marvellous day. 🙂

    Kind regards.

    touchdowntech

    (@touchdowntech)

    I was able to target the column with existing classes. I tried adding a class to the fields but was not successful in getting it to work that way. I applied the following CSS and have it working pretty well.

    /* Custom Column Layout Sizing */

    li.gfmc-column.gfmc-row-2-column.gfmc-row-2-col-1-of-3 {
    width: 50% !important;
    }
    li.gfmc-column.gfmc-row-2-column.gfmc-row-2-col-2-of-3 {
    width: 25% !important;
    }
    li.gfmc-column.gfmc-row-2-column.gfmc-row-2-col-3-of-3 {
    width: 25% !important;
    }

    li.gfmc-column.gfmc-row-3-column.gfmc-row-3-col-1-of-3 {
    width: 50% !important;
    }

    li.gfmc-column.gfmc-row-3-column.gfmc-row-3-col-2-of-3 {
    width: 25% !important;
    }
    li.gfmc-column.gfmc-row-3-column.gfmc-row-3-col-3-of-3 {
    width: 25% !important;
    }

    li.gfmc-column.gfmc-row-4-column.gfmc-row-4-col-1-of-3 {
    width: 50% !important;
    }

    li.gfmc-column.gfmc-row-4-column.gfmc-row-4-col-2-of-3 {
    width: 25% !important;
    }
    li.gfmc-column.gfmc-row-4-column.gfmc-row-4-col-3-of-3 {
    width: 25% !important;
    }

    Plugin Author WebHolism

    (@webholism)

    Hi @touchdowntech,

    Thank you for the update. Sorry that the proposed solution failed to solve your problem.

    Big congratulations on writing the CSS that you need and sharing it with us. It will hopefully assist others that may encounter the same issue.

    Wishing you a marvellous day.

    Kind regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.