@WitchDevelops
Posted
I think you did pretty well on the responsive side!
However, best practice is to use rem or em for responsive font size (instead of the vw that you used; vw and vh are good units for sizing containers). RE responsive font sizes, you may look into calc() and/or clamp(), both are quite useful for fluid typography. For instance, this calculator is really good - generates CSS code for given font sizes https://clamp.font-size.app/ Using this saves you some media queries code.
You don't need to use flex on individual components (h2), you can try to set display: flex on the main card body to have better control of the layout. Make it flex-direction: column, center it, and you can use gap to define distances between elements.
Also it's not good practice to skip heading levels, your h2 should be h1. But it's not a big mistake, rather adhering to best practices and guidelines.
Overall, I checked your code on Chrome, several screen sizes, and it looks good on all :) well done!
@Sindy857
Posted
@WitchDevelops Thank you very much for your feedback
