I am having issues with multi-column form field width. The multi column fields have 10px padding-right applied to them so there's a gap between the two fields. By adding this padding to my CSS file, it applies to the single line fields that are set to 100% width. If I remove the padding, everything lines up correctly but there is no spacing between the multi column fields.
Basically, I just want the multi column form fields to have 10px padding between them, and keep the single column fields set to 100% width so every line appears to be the same width.
My CSS knowledge is very basic so I don't know if I added something wrong to the CSS file, or even how to go about fixing this. Any guidance is appreciated.
instead of targeting all of the .hs-form-fields, let's target on the odd ones. that is what nth-child(2n + 1) will do for us. added a min width to that so when we get under 481px, we remove that padding. you also had a style in there setting the fields to 95%. do a search for that second set of selectors and change the width to 100% at 480px.
Yes, @jennysowyrda I still need some help with this.
The form fields still have 10px padding-right applied to them (in my style sheet). That's how it appears in the URL that I mentioned above. If I remove padding-right: 10px, the single column width displays correctly (100% width). But if I place two fields side-by-side, there's no spacing between them.
I'm just trying to figure out how I can keep all fields set to 100% width, and keep 10px of spacing between two column fields. I hope that makes sense.
instead of targeting all of the .hs-form-fields, let's target on the odd ones. that is what nth-child(2n + 1) will do for us. added a min width to that so when we get under 481px, we remove that padding. you also had a style in there setting the fields to 95%. do a search for that second set of selectors and change the width to 100% at 480px.
Thank you so much! I was able to make it work with some additional tweaking, so I wouldnt have to update the padding if I decided to add more 2-column fields. Here's what I added: