Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Profile Card Component using Flexbox

Batool H. 320

@BatoolHasan

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Would love to hear feedback on how to improve the code

Community feedback

@MishaHernandez

Posted

Hi Batool H.

Visually I see it very well. I leave you some observations:

  • The use of the picture tag is not very useful in this context, since the idea is not to group images but rather to use them as a background in body.
  • I recommend you center the .card container inside body using Flexbox.
  • You make good use of class names but it would be better if you adapt it to a methodology like BEM :)

Greetings and continue with the challenges!

1

Batool H. 320

@BatoolHasan

Posted

@MishaHernandez Hello, thank you for your feedback. I have a couple of questions if you don't mind.

  • Can you clarify where the picture tag is? I've used the figure and img tags
  • I have tried to center the card with flexbox, but it was not being centered in the middle of the viewport, can you advise on how to fix that?
0

@MishaHernandez

Posted

@BatoolHasan Hi,

  • Sorry, I confused the figure tag with picture. However I think you shouldn't use the img tag for background images.
  • To center the card with Flexbox you first need to assign body a height of 100vh. Currently the body has no height because the card is positioned absolutely and I see that it works, but using flexbox for these cases is a good practice.
1

Please log in to post a comment

Log in with GitHub
Discord logo

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