Need help with styling my radio buttons

HTML-CSS
1

Hello! I need help with my radio buttons. I tried styling them but it resulted in an unexpected shape. What do I need to do to make them perfectly round and normal-sized?

replit

1 Like
2

Hi @valabojubharath

Not sure, but your form is bigger than your form container. I think you need to fix that first because if I give the radio inputs a width and height of 2rem works. You can check your code hitting F12 and using browser devtools.
I hope that helps. Happy coding!

3

Hi @carlosvisator!
Thanks a lot for helping.

I think you are mistaken; The form element is very much contained within it’s container if this is what you mean. I hope I didn’t get you wrong.

image
image1920×936 126 KB

image
image1920×932 154 KB

1 Like
4

Hi @valabojubharath

I see. I just opened it with Firefox Developers Edition and it says html - SCROLL and body-OVERFLOW.

survey-form-dev-tools2
survey-form-dev-tools21649×913 129 KB

This is because width I guess. I would use width and then max-width. But no sure how to fix your problem now. Al so this is a article that it says it is the same,

but check last comment as well.

Another article it might help you with this task:

If it is not working I think is better erase styles and start over with only necessary styles to get that layout and then make it beautiful.

Another weird thing. When I turn off width and max-width in body and form, it works better. Also I have made divs display: flex and page display seems works better. You might want try that, comment out styles and turn on step by step. Also wrapping label and inputs inside a div it might help you. Just some ideas.

I hope that helps. Happy coding! :muscle:

1 Like
5

Thanks a ton. Guess I’ll have to go through the basics of CSS to really understand what’s going on.

1 Like
6

Hi again @valabojubharath

Check out Kevin Powell in YouTube. He also has a free course called Conquering Responsive Design witch covers this things and Flexbox.
Wes Bos has a few course for free as well, one about Grid also.
I hope that helps you. You could try to start over but for mobile first, it requires less code, it is easier to adjust for big screens after.
Happy coding!

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.