Styling Form Radio Button in a Landing Page Template

[2jmarshall]

I am trying to left align the radio buttons on my registration form. I would also like space after the radio button before the text. I have tried multiple CSS styles but i just can't seem to get specific enough to do anything.

http://info.cloverimaging.com/roadshow

Thanks for any help!

[Austinh · Accepted solution]

Try this CSS code. It is targeting the group that all the radio buttons sit inside of. The group has padding on the left side, this sets it to zero. Let me know if this works for you.

ul.inputs-list.multi-container {
    padding-left: 0;
}

label.hs-form-radio-display input[type="radio"] {
    margin-right: 10px;
}

Thanks,

Austin Heimerman
Inbound Marketing Specialist

TANK New Media, LLC

[Austinh · Accepted solution]

Try this CSS code. It is targeting the group that all the radio buttons sit inside of. The group has padding on the left side, this sets it to zero. Let me know if this works for you.

ul.inputs-list.multi-container {
    padding-left: 0;
}

label.hs-form-radio-display input[type="radio"] {
    margin-right: 10px;
}

Thanks,

Austin Heimerman
Inbound Marketing Specialist

TANK New Media, LLC

[AnnHoltzapple]

Hi! I am having the same issue, and am not super saavy with CSS (PLUS am trying to navigate the new design manager!). Where do I add this code?

[Austinh]

Hi Ann,

Depending on how you have your templates set up, there is typically a single .css file that is attached. Add the edited css in the attached file. Do you have a preview link you can share?

click "edit" on the css file

[AnnHoltzapple]

Sure! 

http://vulcanequipment-3454438.hs-sites.com/vulcan-customer-feedback

I added some line spacing in the styling which seemed to help, but it's still not exactly how I would like it. 

I found the style sheet, but am not sure exactly where to add the code within that document...

[Austinh]

Hello Ann,

Thanks for the preview link. Without actually seeing your css file I can't tell you exactly where to put it. But generally, there is a "form" area in the css file where all the other form styles live. That would be a great place for it 🙂

Look for a css comment that looks something like this /*********Form**********/

or search for a style named "form.hs-form fieldset.form-columns-3 .hs-form-field" and put your new css after that style set.

If you would like to hop on a screen share I can help walk you through it.

Thanks,

-Austin

[2jmarshall]

Awesome, that worked perfect. But now is there a way to get some padding on the right? I tried padding: 0 5px 0 0; but that didn't work.

[Austinh]

Can you be more specific? Where do you want the padding?

[2jmarshall]

for me the radio buttons are butting right up againt the text. I would like some space on the right side of the radio button before the text.

[Austinh · Accepted solution]

This should fix you right up.

ul.inputs-list.multi-container {
    padding-left: 0;
}

label.hs-form-radio-display input[type="radio"] {
    margin-right: 10px;
}

[2jmarshall]

PERFECT! Thanks so much for your help!