I have a form that I customized with CSS to control the width and placement of a series of repetitive fields. It worked fine before, but apparently the new rollout broke something in my CSS and I haven't been able to figure out how to fix it.
Url: https://sjmetroband.org/music-request
The repetitive fields "Title", "Part", and "Copies" (which still appear on one line as they should) no longer have any space between the fields so the "margin-right" parameter in my CSS is being ignored.
Here's the CSS:
/* custom code for music request form */
#collection-63aa1c14486ba538a8c8a487{
.field-list {
display: flex;
flex-wrap: wrap;
}
/* Item 3 special instructions */
.form-item:nth-child(3) {
width: 100% !important;
}
/* Name to the left */
.form-item:nth-child(1) {
width: 52% !important;
margin-right: 4%;
}
/* email to the right */
.form-item:nth-child(2) {
width: 41% !important;
}
/* Title - part - copies */
.form-item:nth-child(4), .form-item:nth-child(7), .form-item:nth-child(10), .form-item:nth-child(13), .form-item:nth-child(16) {
width: 40% !important;
margin-right: 2%;
}
.form-item:nth-child(5), .form-item:nth-child(8), .form-item:nth-child(11), .form-item:nth-child(14), .form-item:nth-child(17) {
width: 25% !important;
margin-right: 2%;
}
.form-item:nth-child(6), .form-item:nth-child(9), .form-item:nth-child(12), .form-item:nth-child(15), .form-item:nth-child(18) {
width: 8% !important;
margin-right: 2%;
}