Responsive QR card

Solution retrospective
Hellooo, i just finished my 4 project today. if anything wrong / have better solution please let me know : )
Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
Hey @Torawijaya, some suggestions to improve you code:
- Your not using the picture and article element correctly.
-
The picture element isnt needed for this challenge; you only have one image.
-
The Article Element should wrap the entire card. the article event is meant for content that is reusable and can stand on its own. The text by itself can't stand on its own, since it needs a QR code to scan.
<body> <main> <article></article> </main> </body>
-
The QR image isnt decorative, it serves a purpose. So the Alt Tag description for the QR image needs to have a description.** it can't be blank.** Its needs to tell screenreader users what it is and where it will take them to when they scan it.
-
There's a lot of unnecessary CSS code being used, that is just bloating your code. Remove the following:
main { display: grid; grid-template-columns: auto; margin: 2rem; }
img { height: auto; width: 100%; }
picture { max-width: 100%; padding: 1rem 1rem 0 1rem; }
article { display: flex; flex-direction: column; }
- Change the following:
Old:
main { margin: 2rem; }
New:
main { padding: 1rem; }
Old:
article { padding: 2rem 1rem; }
New:
article { padding: 0.63rem; }
Happy Coding!
Marked as helpful
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