Profile card component

Community feedback

• 

  Ahmed•150

  @Ahmed-Elsayed-projectsPosted about 2 years ago

  Hello @AdamMintaj, -One way to do what you want and avoid media queries is to put the user information section and card's background inside a flex container. Then set each of them to flex:1; which will make them share the height in half. From here you can use two way to center the image:

  1. Center the image horizontally with text-align: center;. Then center the image vertically by setting negative margin with half of the image height/width(doesn't matter since it's square-shaped) which in that case is margin-top: -48px;.
  2. Use position: relative; on the information section. Then add this to the image position:absolute; left: 0 transform: translate(-50%, -50%) /*centers the image horizontally and vertically*/ Personally I do prefer the first method because I don't have to add margin padding-top to the information section(to prevent overlapping). Here's a link for my solution: https://www.frontendmentor.io/solutions/flexbox-and-background-styles-WL9A0tbLRn . Hope it helps

  Marked as helpful

  0

  ---

  

  Adam•210

  @AdamMintajPosted about 2 years ago

  @Ahmed-Elsayed-projects thanks a lot for your advice. You actually made me realise I totally overcomplicated the whole thing when it could be done so easily, thanks for that a lot. I will definitely change that. I also let myself check how you did the same challenge and I saw you put the scores in an unordered list. Since I just went with divs, I'm wondering why did you decide to use a list? What are the advantages of using a list here?

  0