💜 Stats Preview Card Component HTML & Tailwind | Vite 💜

Community feedback

• 

  Arne•1,110

  @DudeldupsPosted 9 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 of height 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 used padding instead, it would just push the inner elements away from the corners of the screen and keep the <main> element where it is.

  See a good explanation here

  Hope that helps 🤓 Happy coding!

  Marked as helpful

  0

  ---

  

  Jessica Arvizu•180

  @jessicaArvizuPosted 9 months ago

  @Dudeldups Thank you so much for this explanation! I will make sure to have this in mind next time :)

  0

  

  Arne•1,110

  @DudeldupsPosted 9 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

  

  Jessica Arvizu•180

  @jessicaArvizuPosted 9 months ago

  @Dudeldups you're right :O I hadn't thought of it that way, I will fix this project before starting another 💪🏻

  1