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?
1 Like
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!
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.
1 Like
I see. I just opened it with Firefox Developers Edition and it says html - SCROLL and body-OVERFLOW.
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! 
1 Like
Thanks a ton. Guess I’ll have to go through the basics of CSS to really understand what’s going on.
1 Like
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