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 Using CSS Positioning

@didyouseekyng

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


Good day everyone, I noticed I'm not the only one having issues with the background images, I've tried everything within my knowledge to get it fixed, but no way!! Please I need your help on fixing this issue, I anticipate your response as you review my code. Thanks

Community feedback

@Deborah-Odion

Posted

Hello didyouseekyng,

I noticed you commented out your footer element, probably because it wasn't positioning rightly. Semantically, the footer element should come outside the body element, except if you just decide to make it another div element. For this scenario, the footer element could still be used alongside the "flex-direction: column" properties.

Also, the top image for the card, overflows into the profile picture. This could be solved by giving the profile picture a background color of white, so as to override the top card image overflowing into the profile picture.

0

@didyouseekyng

Posted

@Deborah-Odion I had to comment the footer out because it wasn't positioned well, come to think of it, I should really work on my semantics, and I already made the background color white when I went through your code, I was really impressed. So what do you think of the BEM Naming?

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