Help with Columns width and float

[NikkiG]

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

[TRooInbound · Accepted solution]

Hi @NikkiG,

sorry for given buggy code.

I've forgotten to add ";" in CSS code. 

given code again 

.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.

[TRooInbound]

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

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

[NikkiG]

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

}}

[TRooInbound]

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,

.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

[NikkiG]

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. 

[TRooInbound · Accepted solution]

Hi @NikkiG,

sorry for given buggy code.

I've forgotten to add ";" in CSS code. 

given code again 

.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.

[NikkiG]

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? 

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... 

[TRooInbound · Accepted solution]

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

#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

[NikkiG]

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

[TRooInbound]

Hi @NikkiG Cool, cheers 
more help please visit www.trooinbound.com or email at hello@trooinbound.com

TRooInbound Team!