Submitted over 2 years ago

Profile Card Component

Paul Jin•290

@paulhjin

A solution to the Profile card component challenge

Preview Code

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! 😄

Code

Please log in to post a comment

Community feedback

Md5 dalton•1,430
@md5dalton
Posted over 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

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