💜 Stats Preview Card Component HTML & Tailwind | Vite 💜

Community feedback

• 

  Arne•1,140

  @Dudeldups

  Posted over 1 year 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!

  03

  Marked as helpful