Submitted over 1 year agoA solution to the QR code component challenge
Basic QR code component
accessibility
@ismeh

Solution retrospective
What are you most proud of, and what would you do differently next time?
I'm happy with the result.
Next time I would like to implement the component in react.
What challenges did you encounter, and how did you overcome them?I had problems with:
- Resizing the card with the image
- I solved it using max-width in px in card class
- Placing the card in the middle of the screen
- Solved it with min-height on body
- Had to use a value lower to 98vh to avoid scroll bar (overflow) and high enough to fit the card in the center of the screen.
- Solved it with min-height on body
- Adjusting spacing between text
- I just created 2 little classes to modify top and bottom margin
I have some questions in the following topics:
- It's fine to add/modify body style?
- As I did to solve 2nd problem
- There is a better solution to fix spacing between text and card?
- Maybe inline style on instead of 2 one line classes on stylesheet?
- Should I add always min-width to my componenets in order to meet small screen (320px) requirements (WCAG (I didn't read the guidelines only the tip))
Code
Loading...
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Ismael's solution.
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