My First Project with Frontend Mentor - QR Code Beginner Project
Design comparison
Solution retrospective
This is my first time doing something like this after school. Next time I'd change the order of how I did things.
What challenges did you encounter, and how did you overcome them?How to position elements intuitively instead of guessing.
What specific areas of your project would you like help with?Practice with positioning and what some of the best strategies are.
Community feedback
- @SvitlanaSuslenkovaPosted 2 months ago
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.
Hope you found this comment helpful :)
Marked as helpful0 - @MikDra1Posted 2 months ago
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }
On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful0@GnarlsleyPosted 2 months ago@MikDra1 Thank you MikDra, I have been holding off on using grid and flexbox until I have a good understanding of the relationships present within the box model. What are your thoughts on my approach of withholding use of these display properties?
0 - @leroyg-mPosted 2 months ago
I think it came out good. The links need to be removed to avoid destruction. But in all, it was a good design.
0
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