Skip to content
Submitted 3 months ago

responsive profile-card using flex box

leongratis•150
@leongratis
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

positioning the light circled image at the background and also positioning the circled image at the center with not only position relative and absolute but with addition of flex

What challenges did you encounter, and how did you overcome them?

positioning both the image and the circled correctly

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•5,820
    @thisisharsh7

    Great job figuring out the positioning — those background circles can be tricky! 💡 Using flex together with position: absolute was a smart move to get perfect centering. It’s nice that you handled both mobile and larger screens with your media queries too.

    For next time, maybe explore transform: translate(-50%, -50%) as another way to center absolutely positioned elements — it pairs well with top: 50%; left: 50%.

    Keep it up — this layout looks clean and responsive! 🙌

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