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

css flexbox

promise 520

@ugochukwuuu

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


Please I have a lot of things wrong with this project and would love it if someone can help me with the following areas: 1.How do I set the height of the image to be the view height? It seems that every-time I try to do this it just sets the profile card off balance. 2. How do I position the background image like how it was positioned in the demo? 3.How do I properly overlay the profile image on the bg-pattern? I am not happy with the way I did it, and plus it makes the profile image not to be responsive. Thank You very much

Community feedback

Nika 180

@nikavolk

Posted

Hello!

#1 If you would like to set a height of any element to the full view height, you can do it by assigning height: 100vh. For a quick fix to your card positioning, what I did was replace the 3em max-height with height:100vh, and added to body {} display: flex; That should center the card.

#3 I used position: absolute and the transform attribute to position the element in a similar project.

No idea on the second point, maybe someone else could help with that 😊

0

promise 520

@ugochukwuuu

Posted

@nikavolk Thank you very very much. I really appreciate 😄

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