Skip to content
Submitted about 1 year ago

Simple Profile Card

Stephen Funderburk•180
@Mr-Funderburk
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

I actually couldn't figure out the background so I left it off. I know how to add multiple backgrounds with CSS, however, I couldn't get them to be positioned correctly on any window size. (Like I would set them in place for full screen but if you resize or view them on mobile they are no longer in the correct place.) So what's the secret I'm missing?

Community feedback

  • Jennifer Souza•340
    @zoedarkweatherPosted about 1 year ago

    Yeah I also thought the background was a bit aggravating on this one. As far as I could tell from the design, the images are actually in different positions for the different screen sizes. So I don't think it's a matter of finding the perfect spot where they will just shift on their own. What I did, was change the background position in a media query. Hope that helps. :-)

    Marked as helpful
    0
    Stephen Funderburk•180
    @Mr-FunderburkPosted about 1 year ago

    @zoedarkweather That's a good idea. It just seems silly for such a simple thing. I feel like having a background image of both circles and centering it in the background would have made so much more sense. Though, maybe that's the challenge of this project... Thanks for the tip!

    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