Skip to content
Submitted about 2 years ago

Profile Card Component

Paul Jin•290
@paulhjin
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

Hi Everyone! 👋🏻

I would like to know what the best practice is for positioning the profile picture.

I used a div that contains the card's background and profile image, positioned the parent relative and the child absolute and moved up the image using a negative margin, but don't quite know if this is the best method. What do you think would be a better solution?

   <div class="profile">
      <img src="./images/bg-pattern-card.svg" alt="">
      <picture>
        <img src="./images/image-victor.jpg" alt="Victor Crest's profile picture">
      </picture>
    </div>

	.profile { position: relative;}

	.profile  picture  img {
		border: 0.25rem  solid  var(--clr-white);
		border-radius: 50%;
		position: absolute;
		left: 50%;
		bottom: -3rem;
		transform: translateX(-50%);
	}

Any other feedback you can provide will be greatly appreciated! 😄

Community feedback

  • Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    Hello Paul Jin 👋

    Congratulations on finishing this challenge 👍

    Since this bg-pattern-card.svg is a background and does not form part of the page content, use background-image instead of the img element and you'll have less HTML markup to work with.

    Negative margins also do work in placing that profile picture image, however I'd suggest you use CSS Grid instead:

    main {
   ...
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: /* define your rows here */
}

.profile {
    ...
    grid-row: 2 / 3; /* depending on how you defined your rows */
}

    This is just one way to implement this through CSS Grid and there is still other code you can use. That's how flexible CSS Grid is👌

    Marked as helpful
    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