# Help with Columns width and float

**URL:** <https://community.hubspot.com/t/help-with-columns-width-and-float/3791>\
**Category:** CMS Development\
**Created:** [November 2, 2017, 6:37pm UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791 "2017-11-02T18:37:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![NikkiG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nikkig/32/33088_2.png) [@NikkiG](https://community.hubspot.com/u/NikkiG)\
**Post date:** [November 2, 2017, 6:37pm UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/1 "2017-11-02T18:37:17Z")

</div>

I’ve adjusted the width of my HS Form but I’m having trouble with the fields that are two columns. Can anyone help? Here’s the [page](http://50.28.104.196/~americlomesetup/?page_id=1685)and the code I’ve tried so far. I’m a bit of a novice when it comes to CSS. I’m much more fluent in HTML… So, I’m floundering a bit.

.hs-form .hs-form-field {  
width: 650px;  
}

.hs-form select {  
width: 300px;  
}

.hs-form .hs-form fieldset.form-columns-1 {  
.hs-form fieldset.form-columns-1 .hs-input {  
width: 50%;  
float: left;  
}

.hs-form fieldset.form-columns-1 .input {  
margin-right: 8px;  
}}

.hs-form .hs-form fieldset.form-columns-2 {  
.hs-form fieldset.form-columns-2 .hs-form-field {  
width: 50%;  
float; right;  
}

.hs-form fieldset.form-columns-2 .input {  
margin-left: 8px;  
}}

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 2, 2017, 8:59pm UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/2 "2017-11-02T20:59:11Z")

</div>

Hi @NikkiG,

I’ve found problem with your WordPress CSS code,

if you find and those two lines which are mentioned in below screenshot and put given CSS than it will work fine.

add this code

```auto
fieldset ,.hs-form .hs-form-field , input[type=text], input.text, input.title, textarea, select, email ,.hs-form select {
	width:100% !important
}

```

remove 2 highlighted line CSS code

 ![remove_2_line'.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/2X/3/3922eeb68e399d65e7a8bc142a593b33c209e6f2.png)

---

<div class="post-metadata">

**Author:** ![NikkiG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nikkig/32/33088_2.png) [@NikkiG](https://community.hubspot.com/u/NikkiG)\
**Post date:** [November 2, 2017, 9:21pm UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/3 "2017-11-02T21:21:02Z")

</div>

@TRooInbound  
You’re AWESOME! It’s getting a lot closer.

Now we just need the two column rows to fill the space the one column rows do and align equally on the right.

The padding and max-width you found were my way of cheating to widen the form. But, your code did it correctly, so thank you so much!!! I removed my workaround.

Here’s the code now, did I add yours in the correct place? Do I need to do something else to make all rows justified?

.hs-form .hs-form-field {  
width: 650px;  
}

.hs-form select {  
width: 300px;  
}

.hs-form .hs-form fieldset.form-columns-1 {  
.hs-form fieldset.form-columns-1 .hs-input {  
width: 300px;  
float: left;  
}

.hs-form fieldset.form-columns-1 .input {  
margin-right: 8px;  
}}

.hs-form .hs-form fieldset.form-columns-2 {  
.hs-form fieldset.form-columns-2 .hs-form-field {  
width: 50%;  
float; right;  
}

.hs-form fieldset.form-columns-2 .input {  
margin-left: 8px;

fieldset ,.hs-form .hs-form-field , input[type=text], input.text, input.title, textarea, select, email ,.hs-form select {  
width:100% !important  
}

}}

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 3, 2017, 5:31am UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/4 "2017-11-03T05:31:51Z")

</div>

Hi @NikkiG,

Thanks for appreciating us!

its seems like you have written the wrong syntax for the CSS.

Please remove all yout CSS add bellow code,

```auto
.hs-form .hs-form-field {
	width: 650px;
}
.hs-form select {
	width: 300px;
}

.hs-form fieldset.form-columns-1 .input {
	margin-right: 8px;
}

fieldset , .form-columns-1 .hs-form-field, input[type=text], input[type="email"],input[type="tel"], input.title, textarea, select, email ,.hs-form select {
	width:100% !important max-width: 100% !important;
}.main-content .et_pb_text_0 { padding-right: 50px !important;}

```

Thanks

---

<div class="post-metadata">

**Author:** ![NikkiG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nikkig/32/33088_2.png) [@NikkiG](https://community.hubspot.com/u/NikkiG)\
**Post date:** [November 3, 2017, 3:59pm UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/5 "2017-11-03T15:59:40Z")

</div>

I’m so sorry to keep bugging you. This still isn’t working for me. It doesn’t seem to be changing anything at all. I’ve copied and pasted your code exactly into the Additional CSS of my child theme folder. I’ve cleared my cache. I’ve tried in incognito, but nothing is changing for the rows with two columns. I’m sure I’m missing something obvious, but I don’t know what.

 ![ss for hs.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/7/17c6725c3fad20cb94ad5cd7fb18b5ab99f908dd.png)

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 3, 2017, 4:21pm UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/6 "2017-11-03T16:21:07Z")

</div>

Hi @NikkiG,

sorry for given buggy code.

I’ve forgotten to add “;” in CSS code.

given code again

```auto
.hs-form .hs-form-field {
	width: 650px;
}
.hs-form select {
	width: 300px;
}

.hs-form fieldset.form-columns-1 .input {
	margin-right: 8px;
}

fieldset , .form-columns-1 .hs-form-field, input[type=text], input[type="email"],input[type="tel"], input.title, textarea, select, email ,.hs-form select {
	width:100% !important;
 max-width: 100% !important;
}

#main-content .et_pb_text_0 {
 padding-right: 50px !important;
}

```

I have given code without testing in your environment

Now it will work.

Thanks.

---

<div class="post-metadata">

**Author:** ![NikkiG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nikkig/32/33088_2.png) [@NikkiG](https://community.hubspot.com/u/NikkiG)\
**Post date:** [November 3, 2017, 4:44pm UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/7 "2017-11-03T16:44:07Z")

</div>

Oh my gosh! No apology necessary! I looked and looked for a missing space or character! I should have caught that. Thank you so much! Gonna finish my coffee now. You’re amazing! Thank you so much!

Feel free to tell me to go away now, I promise I won’t be offended and will be 100% grateful for your HUGE help! But, now that I have someone who can answer my questions, I may not let you go until you tell me to go away. 🙂

2 more questions:

1) Do you know how to make these two little bullet points go away before the radio buttons?

 ![Radio button bullets.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/e/e9ab004e6becd6d4b23383ecb69b77e117d38701.png)

2) I have other HS forms on my site here and there that I’d like to ignore all of the code that we just did. They’re good the way they were. I did check the box in HS to have them ignore HS styling, but that was just so I could use my own button. Otherwise, I’d use HS styling. But, since I added the code that you were so awesome to help me with to the additional CSS of my child theme, it’s applying to all forms on my site. If I have to, I can work around them, as the two we just did most important, but if there is an easy way for the other to get past it, that’d be great too. I’m thinking there’s probably some text wrapping involved…but I have no clue where - or what to call out…

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 4, 2017, 7:36am UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/8 "2017-11-04T07:36:39Z")

</div>

@NikkiG

happy to help you!

Answer 1:

`ul.inputs-list li {list-style:none;}`

Answer 2:

from your question what I’m understanding is you have to give CSS for one specific form

for that, you have to give Form ID before to CSS syntax like this,

```auto
#hsForm_5cf7061c-1d75-4da3-9429-25dae539f9f8 fieldset , #hsForm_5cf7061c-1d75-4da3-9429-25dae539f9f8 .form-columns-1 .hs-form-field, input[type=text], input[type="email"],input[type="tel"], input.title, textarea, select, email ,.hs-form select {
	width:100% !important;
 max-width: 100% !important;
}

```

Thanks

---

<div class="post-metadata">

**Author:** ![NikkiG](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nikkig/32/33088_2.png) [@NikkiG](https://community.hubspot.com/u/NikkiG)\
**Post date:** [November 6, 2017, 5:21pm UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/9 "2017-11-06T17:21:38Z")

</div>

Both worked perfectly! Thank you again! As always! 🙂

---

<div class="post-metadata">

**Author:** ![TRooInbound](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/trooinbound/32/89545_2.png) [@TRooInbound](https://community.hubspot.com/u/TRooInbound)\
**Post date:** [November 6, 2017, 5:46pm UTC](https://community.hubspot.com/t/help-with-columns-width-and-float/3791/10 "2017-11-06T17:46:26Z")

</div>

Hi @NikkiG Cool, cheers  
 ![16x16_heart.png.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/8/86306cc0513e44cacfdfc32c1e9003902220911e.png)

more help please visit [www.trooinbound.com](https://www.trooinbound.com/) or email at [hello@trooinbound.com](mailto:hello@trooinbound.com)

TRooInbound Team!