Submitted over 3 years ago

Profile card site using Flexbox

Sharon• 20

@EnjegheO

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would appreciate if I'm given suggestions on better ways to set the background images for the body and how I can use percentages instead of pixels to set the sizes and positions of the background images. Also, general feedback would be appreciated.

Community feedback

Kakeru• 265

@adeleke5140

Posted over 3 years ago

I don't really know how to explain the percentages stuff because all I did was mess around with the values and it kinda worked. why is it stretched out though?

You can also check my github for the background solution https://github.com/adeleke5140/profile-card-component

Sharon• 20

@EnjegheO

Posted over 3 years ago

@adeleke5140 I can't explain why it's stretched too. I saw it when I first submitted and went back to edit the code and set fixed widths for the card but it's still stretched.

Oh, I found the problem. I didn't generate a new screenshot after editing

Grace• 29,310

@grace-snow

Posted over 3 years ago

Is this an old preview image that looks stretched? You should be able to generate a fresh one ☺

Sharon• 20

@EnjegheO

Posted over 3 years ago

@grace-snow How do I do that?

Sharon• 20

@EnjegheO

Posted over 3 years ago

Oh, thank you. I just did.

Grace• 29,310

@grace-snow

Posted over 3 years ago

@EnjegheO nice one!

This looks great. Maybe just add a shadow to the card like the design and it's spot on

Mansoor Roeen• 420

@mansoor-roeen-glitch

Posted over 3 years ago

hey Sharon 👋👋, welcome to the community and congratulations on your first submission.

I suggest.

adding a max-width of 333px on your .card container.

Happy coding, 🎉🎉 keep it up!!!!

Sharon• 20

@EnjegheO

Posted over 3 years ago

@mansoor-roeen-glitch Hello, thanks for the suggestion. I tried that but it still looks stretched. I don't know what else to do.

I found the problem, didn't generate a new screenshot. Thanks😊

Please log in to post a comment

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