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

Profile card component using flexbox

Mariusβ€’ 100

@ir4M

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


Probably took too many divs again in some situations :(

I'm unsure about my profile image positioning with position relative. Cause I use position relative on all the elements below again to restore the right space between the elements. Feels weird πŸ˜… should I rather have taken position absolute?

Community feedback

Lucas πŸ‘Ύβ€’ 104,440

@correlucas

Posted

Hey Marius, congratulations for your solution!

The solution overall is fine, the hardest part you've applied, the background, this is nice. I've only few tips about the responsiveness:

1.The component is not responsive and if you note its not flexible, this is due the min-width you've add to the card that makes the card never gets smaller than its size, try to use instead max-width to allow it to have the maximum width but also shrink.

2.To place the profile image in a better way and without the image moving depending on the screen size, you can use a simple negative margin as margin-top: -50px to make the image place between the header and content block.

πŸ‘¨β€πŸ’»Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-dVGWpOTgWS

Keep coding bro!

0

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