Responsive QR Code Component

Hi 👋, I leave you some tips that may interest you:

• It is convenient to separate the code in different files (html, css) for a better organization and easier maintenance.

HTML 🧱, ACCESSIBILITY ⚖:

• The main content of every page (the card in this case) should be wrapped with the <main> tag.

CSS 🎨:

• It is better to use min-height: 100vh; for the body, as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

• You don't need to use font-weight of 400 and 700 as these are the default values for normal and bold fonts (paragraphs and headings).

• You might consider using relative units like rem or em since they are a better option for scalable layouts. Pixels may not be the best alternative because absolute units don’t scale. You could easily start converting to rem (1 rem equals the font size of the root element, 16px by default).

I hope you find it useful, any questions do not hesitate 🙂

Regards,