Help with multi column form fieldset width

[cpburke]

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. 

Here's a link to a test page I created to show the issue with the form input widths: https://info.ennvee.com/test-template-form

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. 

[jennysowyrda]

Hi @cpburke,

Are you still looking for assistance with this matter? Looking at the page you linked (thank you!), the fields look to be rendering properly. 

Let us know if you still need help. 

Thanks, 

Jenny

[cpburke]

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. 

[lindseynwmn]

@cpburke 

I'd remove this style:

form.hs-form fieldset .hs-form-field { padding: 0 10px 0 0;}

Instead i'd target the classes that are specific to each input and only add 10px to those:

.hs-firstname, .hs-email {padding: 0 10px 0 0;}

[dennisedson · Accepted solution]

@cpburke try this

@media (min-width: 481px) {
  form.hs-form .form-column-2 .hs-form-field:nth-child(2n + 1) {
    padding: 0 10px 0 0;
  }
}
@media (min-device-width: 320px) and (max-device-width: 480px) {
  form.hs-form-60d62b79-9ba4-40d2-816a-bad0047df045_4af4179a-d55c-4feb-90ae-8ab499c4ceaa:not(.hs-video-form)
    .form-columns-2
    .hs-form-field
    .hs-input,
  form.hs-form-60d62b79-9ba4-40d2-816a-bad0047df045_4af4179a-d55c-4feb-90ae-8ab499c4ceaa:not(.hs-video-form)
    .form-columns-3
    .hs-form-field
    .hs-input {
    width: 100%;
  }
}

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.

hope that helps!

d

[cpburke]

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:

fieldset.form-columns-2 .hs-form-field:nth-child(2n +1)

{
padding: 0 10px 0 0;

box-sizing: border-box;

}

@media (max-width: 400px)

{
fieldset.form-columns-2 .hs-form-field:nth-child(2n +1)

{padding: 0;

}