I have several forms, all of which need more spacing between each field. However, I have forms separated into collapsible sections. I have tried several different versions of CSS code that have worked for other people, but in my case all it does is expand the space between the collapsible sections and does nothing to the fields inside those sections. Here’s a screenshot showing fields - there’s a red line where there needs to be more space.
Here’s some of the CSS I’ve tried that has not worked:
body .gform_wrapper label.gfield_label {
margin-top:30px;
}
body .gform_wrapper .gform_body .gform_fields .gfield {
padding:30px 0 0 0;
}
.gform-theme--foundation .gform_fields {
grid-row-gap: 20px !important;
}
Can any of you help me with altering this or finding some other solution to create some more space between these fields inside the collapsible sections?
However, it’s set up so that you have to be logged in to see it, so I don’t know if that’s helpful. I set up a test page with the same form embedded in it that is not behind a “wall” so to speak. This issue applies to all my forms. Here’s the page you can view:
div.collapsible-sections-collapsible-body div.gfield,
div.collapsible-sections-collapsible-body fieldset.gfield {
margin-bottom: 40px;
background-color: palegreen; /* only so you can see where this is being applied */
}
Here is what it looks like when I apply that to your page here:
