Skip to content
Submitted over 4 years ago

Movile first using pure HTML and CSS

Diego De Tomás•55
@SrCienpies
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello! The most difficult part for me was the profile image, i am using absolute position and percentages to center the image, is there any better solution for this part of the card?

Thanks!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    Good work on that, your positioning is okay, it is okay to use absolute position but keep in mind that limiting it only on components that have low priority, but since I am used to using flexbox, for me i'll just use flexbox on it. Just giving a padding-top to the container and then aligning them center, the profile image along with the name of the person, then just adding gap on them so that I could avoid absoluting it (absoluting seems is not a word hahah) well that's just one solution to the question, but yours is a solution as well and it really works well^

  • drallas•375
    @Drallas

    Hello Diego

    Nice card implementation!

    I also used absolute to place the image. You could try with margin left & top.. I Just opened my project for this and i get the picture in the center like that too. Perhaps you could give it a try and see if it works for you.

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