@claire-ca
Posted
Hi again, your solution looks great Bradley! The only slight change I would make would be to remove the border-radius from the middle card and the inner edges of the two outer cards to make it match the design.
Regarding if you should use 'ems' or 'rems' in your code, I don't think one is better than the other. As long as you know how they both work, just picking the best one for that situation seems to be the best option. I've been the opposite of you and using ems all the time (apart from for font-sizing), but I think I'm going to consider the situation more and use what I think is best rather than just sticking to the one unit all the time.
I can highly recommend Kevin Powell's YouTube channel for great tips about building responsively. Here is a link to a video he has about knowing when to use certain CSS units - it made me rethink using ems all the time in my code.
Marked as helpful
@bradleyhop
Posted
@claire-ca Good catch on the border-radius! I was going solely by the Figma file, which has some errors in it compared to the images supplied. I also noticed that I set my project's font-size in the body and not in hml CSS elements, so my rems weren't behaving as expected. (I think not setting a font size in html sets the rem to the user's default font size.)
Thanks for that link! I actually had watched that before (but forgotten about it), but watched it again just now. (It helped me with the rem thing above.) So much great advice in a 6-minute vid!! I appreciate you sharing your approach, too. Ya, that's the trick: seeing what the situation calls for and adapting.
I appreciate the extra eyes. Happy coding!
