Reponsive Radio Button

Please check this code, I want the small dot inside radio button to be centered , I knew I can do this using position but when screen size changes the small circle changes it position which is not good for responsiveness, plz suggest the best practice to make this radio button responsive and in center in every screen, thanks https://codepen.io/hamzacodepen951/pen/wvQYvab
12 Replies
Mannix
Mannix16mo ago
did you put position relative on the parent when using absolute ?
Hamza Naeem
Hamza Naeem16mo ago
No i did not I make parent relative but didnot use absoloute
Wolle
Wolle16mo ago
Maybe using % is the trick, those should scale.
Hamza Naeem
Hamza Naeem16mo ago
could you try if feasible? I checked this as well, and saw the changes, could you please explain me what you do and why you do it? Also text for genders came down now
Chris Bolson
Chris Bolson16mo ago
Adding to what @mannix_ has suggested you need to give the parent (label) a position relative. Also, an alternative method to define the actual position of the "dot" is to use inset and margin auto. https://codepen.io/cbolson/pen/MWzPYXq I have also added display: flex to the labels to ensure that the radio button and text are vertically centered
Mannix
Mannix16mo ago
First we put position relative on the parent so the child will not escape it if use position absolute on it. So if we want put something in the middle we do left of 50% and top of 50% but that will put top left corner of that dot in the center so we need to translate the dot by -50% up and to the left so the point is in the center of the dot not in the top left corner. As to text coming down i put display: inline-flex on the label and removed the margin-top from button to fix it. oh i also modified the size of the button to rounded the numbers you can check the update pen
Hamza Naeem
Hamza Naeem16mo ago
Thank you all of you, I will check and study each one and ask if did not understand any thing. .radio_button label .radio_check_button::before { content: ""; border-radius: 50%; background-color: var(--primary-color-light); transform: scale(0); /* chris / / remove these to be replaced with new properties below / / width: 10.5px; / / height: 10.5px; / / display: inline-block; /
position: absolute; inset:3px; /
distance from edge / margin:auto; / center within parent - increase or decrease this for the size of the dot / transition: transform 150ms ease-in; / just to add some animation */ } .radio_button label input:checked + .radio_check_button::before { transform: scale(1); } Chris, I didnot understand what actually happening for small dot, I knew inset is shorthand property for top bottom left right, but really dont know what margin and inset is doing here, could you please help me to understand? you did not give width and height to small dot, then how it is having a size?
Mannix
Mannix16mo ago
the dot size comes from 100% of the parent size minus 3px from each side because of the inset if you play with the inset the dot will change its size margin auto makes sure the dot stays in the center by applying equal amount of margin on each side
Chris Bolson
Chris Bolson16mo ago
this have just realized that I put my comment regarding changing the size of the dot alongside the margin property rather than the inset property - this may have confused things)
Hamza Naeem
Hamza Naeem16mo ago
Thank you all of you, from all the options I use the flex one, that is reallly simple
Want results from more Discord servers?
Add your server