Responsive QR Code Component
Solution retrospective
What did you find difficult while building the project?
- The thing that i spent more time was on making responsive the page. First I made it with the principles of "Mobile first".
Which areas of your code are you unsure of?
- On how I arrange the date and items (flex or grid)
Do you have any questions about best practices?
- Yes, on my css
Please log in to post a comment
Log in with GitHubCommunity feedback
- @baileyfrye1
Hey Miguel! Your CSS overall looks pretty good. Couple pieces of advice I have, I would set your font family on either your body element or on your card, that way you don't have to declare the font-family for each text element. I would also utilize the "margin" shorthand so you don't have to individually set every side. (i.e "margin-bottom: 3em; margin-left: 2.5em; margin-right: 2.5em;" could be set to "margin: 0 2.5em 3em" and "margin-left: 2em; margin-right: 2em;" could be set to "margin-inline: 2em")
It does look like your image isn't loading, in your HTML you have your image source set to "/images/image-qr-code.png" but in your file structure you do not have an images folder so it is not able to find your image. If you just remove the "/images" from the front of your source everything should work fine. Without seeing the image it's impossible to tell how the CSS looks for the image.
Great job overall though and great use of responsive CSS units!
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