Nishant Jain• 20
@NJain0001
Posted
Thank you for the detailed feedback! position: absolute didn't cross my mind for the background images. I will take your feedback and learn from it. Thanks again!
0
Design comparison
Solution retrospective
-
I didn't know how to make the two semi circles in the background be positioned properly. Any advice on how to go about that part of the UI would be great
-
If you view the code through the Dev tools, the margin is going outside the div tags for the name section (below the image). Is that normal, or is that a code smell?
Community feedback
isimeri• 250
@isimeri
Posted
Hello. I read through your code a little and it's great overall. Regarding your first question, i would place those svg circles inside the html <img> tags instead, and then tackle the positioning with position: absolute.
About the second question: your card .user-card has a fixed height 22.5em. The heights(margins and paddings included) of its children: .pattern-img, .user-info and .user-number-info when added, make up more than the height of the parent .user-card. That's why you see the overflow.
Another little thing, when defining the height of .pattern-img, you used vh(which is a responsive unit), but also used em and rem for the other children. It's good being consistent, using vh or %, etc. everywhere(where it makes sense, of course). Reduce the height of your browser to see how .pattern-img vs the rest of the card behaves. Cheers!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord