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?
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
-
Samara
MemberPosted 10 years ago on Tuesday May 14, 2013 | Permalink -
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 10 years ago on Friday May 17, 2013 | Permalink
