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

Abirami 200

@ab-irami

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


Feedbacks are welcome

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hi

The big things that need fixing on this are

  • html - you've used no meaningful elements at all.
  • html should not be display flex or styled like the body
  • no height should be on the card at all, just a min height if needed on the pattern image at the top of the card.
  • At the moment content is spilling out on mobile landscape probably due to heights and relative positioning used
  • content stacks by default so you shouldn't be using all those position relatives with percentage from top. That's not needed and causing problems with the size of card and positions.
  • use width 100% and max-width on the card instead.

I hope this helps

1
P
Patrick 14,285

@palgramming

Posted

As you can see in screen-capture comparison your overall card shape is not correct. You are also missing the horizontal line element between London and the Social data counts

1

Abirami 200

@ab-irami

Posted

@palgramming Hope now its alright

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