How can I align the radio buttons with their label?

SOLVE
New Contributor

Hi, I have searched for this question here, but none of the solved posts helped with my problem.

 

How can I align the radio buttons with their labels on a form? It currently looks like this:

form.png

This is the first time I'm using radio buttons on a form.

 

I'm not a programmer but I know my way around html and css, and I can't get this to work, help me please!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
HubSpot Employee

Hey @JoanaVL awesome thank you! It looks like this is currently happening because of this style: 

body form.hs-form fieldset[class*="form-columns"] .hs-input {
    width: 100%;
}

which is setting all items with .hs-input to have a width of 100% (including the radio select buttons and checkbox buttons). I'd recommend keeping what you have above and adding the following so that your radio select buttons and checkbox buttons are styled properly: 

body form.hs-form fieldset[class*="form-columns"] input[type="radio"].hs-input,
body form.hs-form fieldset[class*="form-columns"] input[type="checkbox"].hs-input {
    width: auto;
}
4 Replies 4
HubSpot Employee

Hey @JoanaVL would you be able to send a link to the page that you're working on so that I can get a better look at the code? 

Reply
0 Upvotes
New Contributor
Reply
0 Upvotes
Highlighted
HubSpot Employee

Hey @JoanaVL awesome thank you! It looks like this is currently happening because of this style: 

body form.hs-form fieldset[class*="form-columns"] .hs-input {
    width: 100%;
}

which is setting all items with .hs-input to have a width of 100% (including the radio select buttons and checkbox buttons). I'd recommend keeping what you have above and adding the following so that your radio select buttons and checkbox buttons are styled properly: 

body form.hs-form fieldset[class*="form-columns"] input[type="radio"].hs-input,
body form.hs-form fieldset[class*="form-columns"] input[type="checkbox"].hs-input {
    width: auto;
}
New Contributor

Ah it worked! Thank you for the quick reply!

Reply
0 Upvotes