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

Simple Profile Card

@Mr-Funderburk

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


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

@zoedarkweather

Posted

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

@Mr-Funderburk

Posted

@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
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