Design comparison
Solution retrospective
Hello, everyone! A noob here. I finished this challenge, but I wonder if there's a way to make the profile image stay at the center of two divs no matter what you do to the viewport? At the moment I centered it very manually using pixels. Thanks so much for your help!
Community feedback
- @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 helpful1@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 - @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
, removeposition: absolute
andtop: 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@charmonderPosted over 2 years ago@wesleyjacoby Hi Wesley, thank you! I'll give it a go :)
0
Please log in to post a comment
Log in with GitHubJoin 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