It's essential to label a group of radios or checkboxes, not just the individual inputs. That's what the fieldset and legend elements are for.
I recommend you read this about the 62.5% font size hack and why it's a bad idea.
Never limit the height of elements that contain text. That includes the body. It should have min-height 100svh (or vh) not height.
The component shouldnt have a height or width at all, especially not in percentage or px. You lose all control of your layout using percentages because you won't always know what 100% equates to. Use a single max width in rem on the component, that's all it needs.
The only things that should have height and width in this are the images and optionally the radio.
It's really important that font size is never in px. Use rem. There's a detailed post that explains why on the same site.
Make sure you don't remove border from buttons. Make it transparent or the same color as the background but don't remove it. If you remove it, the button will be very hard to see in high contrast mode.
There's no need for any media query at all in this either. One you fix all the sizing issues above you won't have a need for it any more.
Marked as helpful
@Miron-Silviu
Posted
@grace-snow
Thank you so much for your feedback . I will keep that all the informations in mind, and start to impove over all the project.
