Submitted over 1 year ago

Responsive profile card using flexbox

2trill2code•70

@2trill2code

A solution to the Profile card component challenge

Preview Code

Solution retrospective

Could someone explain why using

.profile-card__banner img.user-image {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
}

makes the profile image centered horizontally relative to the parent?

Is there another way to add the banner background without nesting an img tag for the banner? I could not find another way around this because the parent container is position: relative and the nested profile img tag is position: absolute, and thus according to my knowledge, in turn, should make the parent container height 0 and thus you cannot see the banner image, as the profile image is out of the document flow.
Are there some good resources to explain how the entire background image for the page works? I kinda went online and found a solution.
I have also read about BEM-style class naming, could you please rate how well I did on implementing this within my code?

I do apologize for the length of these questions and I would appreciate your answers and feedback. Thanks! :)

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

lisztomania23•170
@lisztomania23
Posted over 1 year ago
position:absolute positions itself to the position given to its parent. margin-inline: auto centers it between left: 0 and right: 0.

You could put the background image without nesting an img inside profile-card__banner, just define height in .profile-card__banner. I did it like this only:
```
height: 140px;
width: auto;
background: url(./images/bg-pattern-card.svg);
```
And I also copied the background image property value from some online solution. This one I used:
```
background-position: calc(50% - 510px) calc(50% - 390px), calc(50% + 470px) calc(50% + 500px)
```
And yeah, your code looks good. It was nice checking your code. Happy coding! 🚀

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