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

@TGPJonathon

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

raya 2,850

@rayaatta

Posted

Hi there, 👋 congratulations completing this challenge 🎉. I have some tips you might find interesting.

**1.**since the bg pattern is only decorative its alt attribute should be empty . You can check out this article which explains why.

2.in your css You have height:100svh; on your body Using an absolute height prevents scrolling on a short screened device or a mobile device in landscape mode You should instead use min-height:100svh; Such that it can scroll when content overflows the viewport.

Lastly, to make your card more responsive Change max-width: 350px; to max-width: min(90%,350px); This means the card will be able to adjust on smaller screens below a width of 350px.

I hope this helps great solution you got there 🤩 Happy coding

Marked as helpful

1

@TGPJonathon

Posted

@rayaatta

Thank you so much for the comment! I honestly didn't know the height:100svh; prevented scrolling so I'll keep a note of that for the future.

The other tips are very helpful too!

1

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