Skip to content
Submitted about 1 year ago

Responsive profile card using flexbox

2trill2code•70
@2trill2code
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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! :)

Community feedback

  • lisztomania23•170
    @lisztomania23Posted about 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! 🚀

    1
    2trill2code•70
    @2trill2codePosted about 1 year ago

    @lisztomania23

    Thanks for your reply. Also would using height be a bad practice? Or is it ok to use it in this case?

    1

Please log in to post a comment

Log in with GitHub

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