Submitted almost 2 years ago

Profile Card Component

Paul Jin• 290

@paulhjin

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

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

@md5dalton

Posted almost 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

Please log in to post a comment

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