Responsive QR code component with HTML und CSS

Community feedback

• 

  Dominika Wojewska•110

  @WitchDevelopsPosted about 1 year ago

  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!

  1

  ---

  

  Sindy857•110

  @Sindy857Posted about 1 year ago

  @WitchDevelops Thank you very much for your feedback

  0