Design comparison
Solution retrospective
How do I get rid of the space between the profile picture and the profile name/age?
How do I get rid of the space between the stats and the text under the stats?
Thanks for all the feed back!
Community feedback
- @DavidMorgadePosted about 2 years ago
Hello Luis, congrats on finishing the challenge pretty good job!
If you don't mind I would like to help you with your questions.
The problem with the picture is that you are using position relative on the image, but the container is still getting the space that your image should be ussing, there is a little bit of a trick here, you can set your img margin to a negative number, in this case you set it to
top: -3rem
, try using in the same imagemargin-bottom: -3rem;
, your selector should look like this:.card__img--picture img { position: relative; top: -3rem; border: 6px solid #fff; margin-bottom: -3rem; }
To get ride of the space you need to the defaults margins to 0, set your h2
dark-blue
margin to 0, this strange behaviour of random margins usually comes from browser default stylesheet, you can reset all the browser default margins and paddings by using this at the start of your code:* { margin: 0; padding: 0; }
Hope my answers help you, if you have any questions, don't hesitate to ask!
Marked as helpful1 - @ErayBarslanPosted about 2 years ago
Hey Luis. Great work on your solution! It's responsive and accessible. I've looked into your code and the issue comes from
top
attribute on img. You can fix it by changing it tomargin-top
:.card__img--picture img { position: relative; margin-top: -3rem; border: 6px solid #fff; }
When top attribute used, base position of the element stays same, just visually effects it's positioning. Using margin simply fixes that. For your second issue, it's due to the default margin of h2 and p. You can fix by using: h2, p {margin: 0;} To not deal with default margin, padding at the beginning of CSS in addition to box-sizing I'd suggest adding:
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
Aside these perfect solution and happy coding :)
Marked as helpful1
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