QR code component solution using CSS Flexbox
Solution retrospective
I am proud that I can learn new things from completing this challenge and I would like to use them in future challenges
What challenges did you encounter, and how did you overcome them?the div position was the challenge I encountered; fortunately, I could overcome it by searching and finding the solution.
What specific areas of your project would you like help with?I need more help in these areas of my code: 1- flexibility 2- clean and light
Please log in to post a comment
Log in with GitHubCommunity feedback
- @roopxx
@HussainAzimi, you did it really well, esp. the box-shadow around the main component ( I struggled for that and aligning the image ). However I would like to make note of the component not being centered vertically, maybe trying out column flexbox can come handy or perhaps auto margin along y axis ;-)
- @sipanahmad
Good Job, keep going. You just need to change the description text color to : .description p{ color: var(--Grayish-blue); }
- @geektim
Hi there, this is a beautiful job done. Well done! As regarding the centering of your card to the middle, you could consider the following: making your background display: flex; justify-content: center; align-items: center;. Or you could make your background position to be relative, then the card's position to be absolute, then you set top: 50%; left: 50%; transform: translate(-50%, -50%); on your card. I hope you find this helpful.
- @code-sura
Excellent work!
A suggestion:
Try to have good contrast ratio for the text. Especially the paragraph text. Readability is more important and is the most important criteria for a good design.
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