Design comparison
Solution retrospective
This was fairly simple, as it is just a single card that does not expand. But I am still struggling to close the gap between stats name and number. Seems like there is a gap, but the only thing I found to be working with my knowledge is by setting bottom text top margin to negative number, so it gets closer to the top number. Still, did not implement this as it feels like this is not a good practice. Any advice on how to do that would be appreciated. :)
Community feedback
- @palgrammingPosted over 3 years ago
You are fighting the default styles put on the elements. Since you are using a H1 the space you are trying to remove is given to the H1 by the browser by default. This article or one similar might help https://www.webfx.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/
0@ignascPosted over 3 years ago@palgramming thanks for the link! First time I hear about it, will definitely look into it. Quick glance of the article and it reminds me, how I apply bright borders to all elements while styling the page, so I can see where each element is and how it interacts with other elements by using
html * {border: 1px solid red; }
0@palgrammingPosted over 3 years ago@ignasc yep
* { box-sizing: border-box; margin: 0; padding: 0; }
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