How can I align the radio buttons with their label?

Developer Support CMS Development
1

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
form.png419×545 67.9 KB

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!

2

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?

3

Sure, here it is https://campanhas.ciben.pt/formacao-reciclagem-v10-primavera.

4

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

Ah it worked! Thank you for the quick reply!

6

hi! i’m having this issue to. I can’t find where to go into the CSS to update this. If I go to the style sheets or templates, it takes me to all of them, not to this specific page/setting. Can anyone advise how to get into the form CSS to update?

7

I have the same question as you Sarah_K!