Profile card component solution with Flexbox

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Greetings, Ash! 👋

  Good work on this challenge! 👍 The card component looks great! 😀

  I think the way you added and positioned the background images works well for this challenge (it's pretty much the same way I did things in my solution to this challenge).

  Using padding to add space around elements isn't a bad idea, either. The only suggestion I have is to use less px in your code and more em or rem. I think it’s better to use em or rem for as many values of that sort as you can, because then the UI of most of of your app will scale accordingly when the font-size changes. If you end up setting some values for margin/padding/etc. in px and others in em or rem, the layout of your UI might look a little weird when the font-size changes because only the values set in em and/or rem got adjusted with the font-size (not those set in px). 😉

  Hope that is a little helpful. 🙂

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  1

  ---

  

  Ash•80

  @nyxravenPosted over 3 years ago

  @ApplePieGiraffe Hello! And thank you for the advice! 🙂 Will keep this in mind. Wow, your solution looks perfect!

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @nyxraven

  Thanks! 😀 Glad to help! 🙂

  0
• 

  Rasoir-genereux•145

  @Rasoir-genereuxPosted over 3 years ago

  Hello, To center the profil card I defined a specific height to my container with display: flex; flex-direction: ...; justify-content: center; align-items: center;

  I hope it will help you I learned some stuff in your code too. Thank you :)

  ras-gen

  1

  ---

  

  Ash•80

  @nyxravenPosted over 3 years ago

  @Rasoir-genereux Thank you! 🙂 It does - feels like I'm abusing too much the padding...

  0