@Ahmed-Elsayed-projects
Posted
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:
- 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 ismargin-top: -48px;. - Use
position: relative;on the information section. Then add this to the imageposition: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
@AdamMintaj
Posted
@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?
