Skip to content
Submitted about 2 years ago

A Simple Responsive Profile Card Component

Viraj Chavan•100
@viraj308
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

@correlucas Added a media query for footer section as you suggested and also worked on the image as it was stretching with increasing width. Thanks a lot for your tips Lucas Sir. I really appreciate your help. Now the card should be responsive and unbreakable in super small widths.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Viraj Chavan, congratulations for your new solution!

    You've done a nice work putting everything together in this solution. Your solution is already a lot responsive, something you can improve is to make the stats section change the flow after width: 350px to make the content fit in different row to save space. See the media query I created for you below:

    @media (max-width: 350px) {
.footer {
    display: flex;
    flex-direction: column;
}
}

    👋 I hope this helps you and happy coding!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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