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 using flex and scss with fixed background positioning

anas ali 415

@anas-cd

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


feedback is appreciated, 1- please if you know another way to center the profile card without using the width 100% trick while using the flex align would be nice

2- there is a slight gap between the profile picture and its border if you know how to fix that please do let me know.

thank you, and hope you like it ^_^

Community feedback

Rhyine 20

@the-catalystmc

Posted

Hello, I like your design, it was neatly done. To center the profile card I placed it as the only item in a flex container. I made the container height 100% and then place item center. body { display: grid; font-family: "Kumbh Sans", sans-serif; grid-template-columns: 1fr; grid-template-rows: 100vh; place-items: center; background-color: rgb(40, 187, 231); }

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