Help with multi column form fieldset width

SOLVE
Highlighted
Regular Contributor

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. 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Regular Advisor | Platinum Partner

@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

dennis
5 Replies 5
Community Manager

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


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Regular Contributor

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. 

Reply
0 Upvotes
Occasional Contributor

@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;}

 

Regular Advisor | Platinum Partner

@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

dennis
Regular Contributor

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;

}