Profile card component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Helen, good job completing your second challenge! This looks great on the whole, and many things were done well in the CSS. As for other feedback, I think the circle background needs to be repositioned again so that it can look like the design, and also, I think there should be two circles instead of just one. Also, at desktop view the card's font size looks rather small. I noticed that you're using a width: 40vh on your .card, which to me in an interesting choice, and I'm curious as to what's your thought process behind the decision to use a viewport height unit for width.

  Once again, well done putting this together, and keep coding! 😊

  0

  ---

  

  HelenJonathan•20

  @HelenJonathanPosted over 2 years ago

  @elaineleung Hello Elaine, thanks for the feedback it is much appreciated. I had a hard time getting the right image for the background, I guess that contributed to the circle not appearing properly. For the width, I have noticed that when I use values like percentages and viewport height, the container tends to adject according to the screen size, this helps to reduce the line of codes i write.

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @HelenJonathan About the two circles, I used a ::before and ::after pseudo element for the top and bottom circle, with the card set as the position: relative element. Instead of using a percentage or viewport unit, you can try using a fixed width because the idea here is that the circles remain immovable and unchangeable even when the screen size changes, and if you use viewport units, the circles will have a hard time staying in position. You can find the width and height of the SVGs in their SVG file.

  About using vh for width, I think there shouldn't be too big of an issue unless the viewport height changes, like if I shrink the height of the browser, in which case the width would also shrink dramatically. If you're interested in experimenting with more responsive properties, you can check out min() and max() as well.

  0