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.

Responsive Containers

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Samara
    Member

    I'm wondering if anyone has figured out a solution for columns being displayed in responsive themes. Because columns are not built as containers in gravity forms, I've not found a way to stack them appropriately.
    [col 1][col 2][col 3]
    should do the following
    [col 1]
    [col 2]
    [col 3]
    instead it becomes...
    [col 1 - field 1]
    [col 2 - field 1]
    [col 3 - field 1]
    [col 1 - field 2]
    [col 2 - field 2]
    [col 3 - field 2]
    [col 1 - field 3]
    [col 2 - field 3]
    [col 3 - field 3]
    Is there any way to create a container div that serves as the column block instead?

    Posted 11 years ago on Tuesday May 14, 2013 | Permalink

  2. dmayer5
    Member

    Try this:

    @media only screen and (min-width: 200px) and (max-width: 768px) {

    .gform_wrapper .gform_body .top_label li.gfield.gf_right_half {
    float: left;
    clear: left !important;
    width: 99%;
    }
    .gform_wrapper .gform_body .top_label li.gfield.gf_left_half {
    float: left;
    clear: left !important;
    width: 99%;
    }
    .gform_wrapper .gform_body .top_label li.gfield.gf_right_third {
    float: left;
    clear: left !important;
    width: 99%;
    }
    .gform_wrapper .gform_body .top_label li.gfield.gf_left_third {
    float: left;
    clear: left !important;
    width: 99%;
    }
    .gform_wrapper .gform_body .top_label li.gfield.gf_middle_third {
    float: left;
    clear: left !important;
    width: 99%;
    }

    }

    Posted 11 years ago on Friday May 17, 2013 | Permalink