QR component CSS + HTML

Solution retrospective
I mainly focused on the design of it so the HTML isn't that semantic with only divs. I decided with a wrapper that is display flex and aligned and justified to center on the screen, padding to make some more white space. Let me know how I did!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
Hello Tom Golding, congratulations for your first challenge solution!
I saw your live site and the design is all perfect, you've matched the design files. There's only one detail to fix. Your card is slightly bigger than the reference, try a value for
width
around 340 / 360px, 400px is too big. You can add a small margin around the container likemargin: 20px;
to avoid the screen borders to "touch" the card. Fixing that you can consider use the propertymax-width
instead ofwidth
to keep your element flexible and allow it to contract in narrow screens..container { margin: 20px; max-width: 350px; background-color: hsl(0, 0%, 100%); padding: 20px; border-radius: 20px; }
Check the report panel to fix minor issues about the accessibility and the html semantic.
All the rest seems really good, congratulations!
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