π Stats Preview Card Component HTML & Tailwind | Vite π
Design comparison
Solution retrospective
Hello Front-End Mentor Community! I'm Jessica and this is my solution for this challenge! π
Built with:
- HTML π§Ύ
- Tailwind CSS π¨
- Mobile first workflow approach π²
- Perfect Pixel
Community feedback
- @DudeldupsPosted 8 months ago
Hello! π
There are some things in your CSS to optimize the site:
Avoid setting the width to 100vw. The vw does not account for a scrollbar and your site ends up being 100vw + the scrollbar's width and you have a horizontal scroll bar.
On the card, you have a fixed width, try to only set a
max-width
. Let the elements inside the container just take up the space they need.It's also better to use
min-height: 100vh
instead ofheight
for the outer container elements. This way, on a larger project, the element could still expand if it was bigger.Try to find a sweet spot for a
max-width
of the card before the media query kicks in. When the card expands too far, the text looks a bit "lost"By setting a margin on
<main>
you push it down from its "original spot". If you usedpadding
instead, it would just push the inner elements away from the corners of the screen and keep the<main>
element where it is.Hope that helps π€ Happy coding!
Marked as helpful0@jessicaArvizuPosted 8 months ago@Dudeldups Thank you so much for this explanation! I will make sure to have this in mind next time :)
0@DudeldupsPosted 8 months ago@jessicaArvizu I would recommend fixing your bugs before you move on to the next project. Part of a developer's daily routine is looking at existing code and fix/change it - not only write new code every day :D
1@jessicaArvizuPosted 8 months ago@Dudeldups you're right :O I hadn't thought of it that way, I will fix this project before starting another πͺπ»
1
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