QR-Code component (Basic HTML - CSS) (Modified to be responsive.)

Solution retrospective
I would appreciate any feedback (": Modified to be responsive for mobile landscape.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @fernandolapaz
Hi 👋🏻, in case you want to take a look:
HTML / ACCESSIBILITY:
- To create responsive websites, the following <meta> tag should always be included inside the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- The main content of every page (the card in this case) should be wrapped with the
<main>
tag.
- Every page should have an
<h1>
.
- This is a meaningful image and it should have an
alt
text with a description in case the user can't see it.
CSS:
- You might consider using some CSS reset as a good practice at the start of each project, to have a clean starting point and reduce differences between browsers. An example from Josh Comeau 🔎
Here are some very common and useful ones to get you started:
* { box-sizing: border-box; margin: 0; padding: 0; } This will remove the vertical scroll bar you have for example.
- Think about using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default). Consider this suggestion especially for the
font-size
.
I hope it’s useful : )
Regards,
Marked as helpful - To create responsive websites, the following <meta> tag should always be included inside the <head>:
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord