Skip to content
Submitted over 2 years ago

Profile Card using Flex and custom CSS

Andy•520
@AndyAshley
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

Any feedback on the background images would be great. These were a pain to do when trying to make it responsive. The fixed 1440 and 375 were fine, but scaling looks bad lol.

Community feedback

  • Benjamin Beckman•230
    @becckmanPosted over 2 years ago

    They were indeed a pain to get positioned correctly. What I did was adding the two images as img elements and positioned them absolute. I positioned them relative to the card instead of the body, this way I could get them to be in about the same position relative to the card on all resolutions.

    I kept them the same position and size everywhere so definitely not a perfect solution, but felt like it did the job.

    Marked as helpful
    0
    Andy•520
    @AndyAshleyPosted over 2 years ago

    @becckman Thanks! I will keep that in mind next time! I tried a few different ideas but not the card itself. good thinkin!

    1

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