The challenge wasn't super difficult, but I did have problems with getting Javascript to work as well as figuring out what was wrong with my buttons.
Can anyone tell me if there are better ways to center elements? Even now I can't seem to properly center my radios despite everything I've tried.
You were pretty close to getting the radio inputs where you want them to be. To fix it all you need to do is take the flex-grow property off the label elements selection and for the .radios div add justify-content: space-between.
Essentially what was happening was that the flex-grow property was causing the radios to divide the horizontal space of their container evenly which will override the justify-content property on their container.
In general, flexbox is usually a great way to center things but it can be confusing to understand what the different properties do. This video was a great introduction to the topic for me: https://www.youtube.com/watch?v=tXIhdp5R7sc
This is the first time I have tried.
I was not sure which unit of measure to use for styling. I thought "px" would be easiest, but it didn't seem responsive enough.
I could not automatically center the box at the top and bottom. I set margin-top but it might be unbalanced on some devices. I would like to know a better way.
What units to use in what situation really depends on what you want to do with a given design. However, pixels should be avoided in most situations except for cases where you don't want to resize something (for instance, border-sizes). That being said, I found this video to be very helpful:
Are you using the right CSS units?
For your second question I would make the body element into a flexbox and extend it the full height of the window like so:
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
You'll also need to remove the margin-top (or set it to 0) on the .card class.
I used the following css to make my numbers align vertically:
width: 28px;
height: 28px;
line-height: 32px;
I was wondering if there is any better way to do this.
In my solution, I made the spans containing the numbers into flexboxes to center them within their circular backgrounds:
display: flex;
justify-content: center;
align-items: center;
It's pretty much my default approach when I need content to be exactly in the center of something.
Suggestions plz
Hey Fatima, great work on the desktop version of the design! One issue I noticed is that the left image has rounded corners on the top right and bottom right corners which the design doesn't have. An easy fix for this is to use four values for the border-radius property like so:
border-radius: 10px 0 0 10px;
This applies the values to the corner starting from the top-left and continues clockwise to the top-right, bottom-right, and bottom-left.