@Dudeldups
Posted
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.
Hope that helps 🤓 Happy coding!
Marked as helpful
@jessicaArvizu
Posted
@Dudeldups Thank you so much for this explanation! I will make sure to have this in mind next time :)
@Dudeldups
Posted
@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
@jessicaArvizu
Posted
@Dudeldups you're right :O I hadn't thought of it that way, I will fix this project before starting another 💪🏻
