Is there a way to force the State field to a new line below the City sub-field instead of next to it? How else can you stylize the size of it with CSS?
Wondering is the constraint from this post was changed/resolved: How can i make the address fields line by line instead of default [RESOLVED]
Hi,
This solution assumes you are using the eCommerce Form template.
To force the State field to display on the following line instead of next to the City field, you can use the following CSS:
.gform-theme--foundation .ginput_address_state.gform-grid-col{
flex: 0 0 100%;
}
The output would be like this:
To make the City field width correspond to the State field full width, you can use a similar approach:
.gform-theme--foundation .ginput_address_city.gform-grid-col{
flex: 0 0 100%;
}
As they are pretty much the same snippet, you can reference both like this in a single rule:
.gform-theme--foundation .ginput_address_state.gform-grid-col , .gform-theme--foundation .ginput_address_city.gform-grid-col{
flex: 0 0 100%;
}
The final output would look like this:
If you are using a different template or applying the address fields in a different way, please share a link to the form you are building to see how this solution could be applied to the specific scenario.
