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

Luca Toni 80

@shavedhead

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


Let me know what you think! I had a lot of trouble with the background images. Let me know what I could have done better. Thank you for your responses!

Community feedback

P
Jessica 880

@perezjprz19

Posted

The background images were the bane of my existence last night. I was up until 3am trying to get them right because they were creating a bunch of overflow. 🤣

Ultimately, instead of positioning them in relation to the viewport, I absolutely positioned them in relation to the card and used the translate property to get them on the opposing corners.

I still have some overflow, but not as much. The best solution? Probably not. The prettiest? Eeeeh, nah.

I think your solution looks good, but I can't see your background bubble images on my phone very well, so maybe they still need some work. I saw other people using fixed positioning to get them were they wanted and I thought that worked well too.

Marked as helpful

0

Luca Toni 80

@shavedhead

Posted

@perezjprz19 Hmm thanks for the reply Jessica. I'll probably try to work on it some more later tonight and hopefully fix them.

0

@JohnIdenyi

Posted

Dope work!

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