Design comparison
Solution retrospective
I found it difficult to complete the media query and had issues with centering the QR code. Initially it was impossible to center it, I think it was something to do with the margins.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Voffee, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!
You don't really
media query
in this challenge all you need is to make the card responsive, I saw your code and all you miss is to replace the propertieswidth
withmax-width: 320px;
this way the card resize with the screen when it scales.See the code fixes I did for you:
.container { background: var(--container-color); padding: 1rem; border-radius: 0.625rem; box-shadow: 5px 5px 5px rgb(0 0 0 / 30%); margin-bottom: 0.25rem; max-width: 320px; }
Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
👋 I hope this helps you and happy coding!
Marked as helpful0 - @PhoenixDev22Posted about 2 years ago
Hello voffee,
Congratulation on completing your first challenge here in frontend mentor. . Your solution looks great. I have some suggestions regarding your solution if you don’t mind:
- You can use
<main>
landmark to wrap the card and<footer>
for the attribution. HTML5 landmark elements are used to improve navigation.
- Page should contain
<h1>
. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>
withsr-only
class hidden visually and present for assistive tech users.
- In my opinion, the alternate text should indicate where the Qr code navigate the user : like
QR code to frontend mentor
.
CSS:
- Consider using
rem
for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
- Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.
- It's recommended to include a git ignore. This came with your starter files. It's less important in this challenge but will become extremely important as you move onto larger projects with build steps.
Aside these , Great job on this one! Hopefully this feedback helps
0 - You can use
Please log in to post a comment
Log in with GitHubJoin 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