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

@olaniyivictor

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 am unsure of the phone mediaquery.

Community feedback

@victorsonet

Posted

Hey!

  • Usually you don't want to give set hight to the card, the reason for that is it will grow as it gets more content (for example by adding one more paragraph to the card it will grow with the hight of that paragraph), so with the right amount of content and padding the card will be the same hight as it needs to be.
  • In this project the main content of the card is a column (only the followers, cards and likes part is a row itself where you did well with flexbox), so you can use flexbox on the whole card as well and set the flex direction to column, then set align items to center and this way everything you have in the card gets centered so you dont need extra padding from the left side where you used that for the elements
  • Last thing is setting up the picture on the upper part of the card with width and height of 100% so it fits the whole box everytime you resize it
  • maybe I would add one more media query just so there is not overflowing in neither of the screen sizes

I tried to be more detailed so it serves you a little bit better and you probably feel overwhelmed by all these things but stay strong and keep going brother!

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