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 html and BEM-CSS.

@Passenger89

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


I am open to discussion and for other members of the community to offer feedback. I hope that you can:

  • Offer constructive criticism.
  • Share ideas.

I would like to know how I can make this component a lot more responsive. As it currently is, the layout distorts when zoomed by the user.

Please take a look at the code and let me know what you think.

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hi William

This has really nicely structured html and the css looks good.

My Main suggestions for improvement are to try and get it closer to the design. Your card looks much bigger / more spaced out and the shadow is much darker. I also notice content is hitting the screen edges for me on mobile portrait and landscape.

The other suggestion - and this one is important - is to not nest your css selectors unnecessarily as you are doing now. This is really increasing the specificity and can cause you big problems when you get to larger projects later. It's best to break that habit as soon as possible.

Good luck

Marked as helpful

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