@bccpadge
Posted
Hello @NikNT. Congratulations on completing this challenge!!!🎉
I checked your code and figured out the border radius issue.
-
Update your border-radius using the code:
border-radius: 8px 8px 0 0; -
Your HTML structure needs to be fixed due to lack of semantic tags.
-
Every website should have at least one landmark like a
maintag
<body>
<main></main>
<footer></footer>
</body>
CSS 🎨:
- I found the issue with your container styles and that is reason why your component gets cut off at the top and bottom.
container {
/* height: 100vh; */ /* width and height CSS property sets elements to specific width or height */
/* width: 100vw; */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* Min-height defines the minimum height of an element*/
padding-block: 4rem / *Adds spacing on the top and bottom of your card*/
}
- Remove width and height in the media query as well
@media only screen and (max-width: 768px)
.container {
/* height: 100vh; */
/* width: 100vw; */
overflow: hidden;
}
I would suggest you use em units for media queries because they work better across all web browsers.
More info📚:
Here is my solution to this challenge:Stats preview card component
Hope this helps you and don't hesitate to reach out to me if you have any questions
Marked as helpful
@NikNT
Posted
Hi @bccpadge
That is quite a detailed review of the code and you've put forward some serious suggestions and recommendations. I will surely incorporate these in this and upcoming projects.
Thanks for helping me become a better developer!
NT
