Blog, Website & Page Publishing

cpburke
Contributor

Help with multi column form fieldset width

SOLVE

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. 

0 Upvotes
1 Accepted solution
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

Help with multi column form fieldset width

SOLVE

@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

View solution in original post

5 Replies 5
jennysowyrda
Community Manager
Community Manager

Help with multi column form fieldset width

SOLVE

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

0 Upvotes
cpburke
Contributor

Help with multi column form fieldset width

SOLVE

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. 

0 Upvotes
lindseynwmn
Contributor

Help with multi column form fieldset width

SOLVE

@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
Solution
HubSpot Product Team
HubSpot Product Team

Help with multi column form fieldset width

SOLVE

@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
Contributor

Help with multi column form fieldset width

SOLVE

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;

}