Profile Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  🔥 Hello Charmonder! I see that you're going throw your Frontend Mentor journey!

  Answering your question, to place the profile image between the two divs you can use a simply technique. Apply a negative margin in your element forcing it move away a little bit from the original positon.

  I've looked your solution and I have a fix:

  🔥 Apply the code below and reset the position: relative/absolute you've applied to the other elements trying to center the image.

  .profile-img img { margin-top: -55px; }

  I did this same challenge I've applied the negative margin. If you want to use my code as an example, here is my solution:

  https://www.frontendmentor.io/solutions/fresh-prince-card-component-vanilla-css-easter-eggs-6Qe2CAE0H8

  Marked as helpful

  1

  ---

  

  charmonder•260

  @charmonderPosted over 2 years ago

  @correlucas Hi Lucas! Thanks again for the suggestion! I tried it and it looks great and it makes the code leaner, too :)

  0
• 

  Wesley•330

  @wesleyjacobyPosted over 2 years ago

  Hi,

  Congrats on completing the challenge!

  Fellow noob here and I also struggled with the positioning of the profile image. Here's what worked for me.

  On .profile-image img, remove position: absolute and top: 240px and add the following lines:

  position: relative;
  margin: 0 auto;
  transform: translateY(-50%);
  

  You may need to experiment with the translateY percentage. Here's some documentation on translateY.

  I hope that helps, or gets you closer to the result you're looking for.

  1

  ---

  

  charmonder•260

  @charmonderPosted over 2 years ago

  @wesleyjacoby Hi Wesley, thank you! I'll give it a go :)

  0