Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

grid, flexbox

sym28 20

@sym28

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


to vertically position the profile image between two elements, I used position: absolute on the image element along with top/left/bottom, and position relative on the parent container.

Is there an alternative way I can position the image perfectly in the middle without having to eyeball top/bottom/left/right values?

Community feedback

Hadiza 200

@Thedeezat

Posted

Hey,

I just recently tried this challenge and i used position absolute. i got help from @vanzasetia about using background positioning which i think will also be easier for you.

More information about background positioning, you can try to check this 👉 video

  background-image: 
    url('../images/bg-pattern-top.svg'),
    url('../images/bg-pattern-bottom.svg');
  background-position: top left, bottom right;
} 

And instead of height: 100%; i think u should use height: 100vh; cause when making an element span the full height of a page it's best to use vh.

Marked as helpful

2

Vanza Setia 27,855

@vanzasetia

Posted

@Thedeezat 😁Thanks for mentioning me! I really appreciate it! @sym28, you can check the exact way how I positioned the background by checking my GitHub repo, then see the body on my CSS.

Hope that help! @sym28

0
Hadiza 200

@Thedeezat

Posted

@vanzasetia Thank you. It's really nice to know.

0
sym28 20

@sym28

Posted

@Thedeezat Thanks for the info, much appreciated :)

0

@Fawkes11

Posted

you can use position relative and absolute as you did, but in the child you can use letf: 50%; transform: tranlateX(-50%); so it will always be in the middle and for the vertical position take half the size of the image, if the image is 100px high then top: -50px;

Marked as helpful

1

sym28 20

@sym28

Posted

@Fawkes11 Thanks! Works perfect.

0

@shreeharsh1141

Posted

place your bootstrap class card div inside bootstrap container and add a top margin of 15% to card

0

Please log in to post a comment

Log in with GitHub
Discord logo

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