Design comparison
SolutionDesign
Community feedback
- @AkoToSiJeromeEhPosted 6 months ago
Hey ! Great work out there i just notice that the image avatar are not aligned horizontally , you are correct through the usage of position : absolute and position : relative but the reason why its not working is because of the placement of position : relative that is on the .image-container but it is spanning from start through end that's why when you use left or right the image avatar will place on the start , to fix this you should add the position : relative in the .inner-wrapper by adding this the image avatar will aligned horizontally . thats all happy coding !!!
.inner-wrapper { border-radius: 15px; overflow: hidden; position: relative; // add this }
.image-container { position: relative; remove this width: 326px; height: 140px; }
#Victor { position: absolute; // remove this top: 35%; // remove this left: 15%; // remove this margin-left: 160px; // remove this transform: translate(-50%, -50%); // remove this z-index: 1; border-radius: 50%; border: 4px solid #fff; background-position: right 50vh,bottom 40vh,top 40vh, left 50vh; left: 0; // add this right: 0; // add this margin: auto; // add this top: 5rem; // add this and you can adjust this }
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