Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I am proud that i completed the challenge, but i could not make the conatiner correct.
What challenges did you encounter, and how did you overcome them?I encountered a problem with making my container.
What specific areas of your project would you like help with?I believe the issue comes from my IDs in my html.
Community feedback
- @aditya-alshiPosted 2 months ago
- You might want to use flexbox for centering the component
- Make the size of the component consistent by using aspect-ratio CSS property.
- As much as possible follow the instructions in the readme.md and style-guide.md file provided by frontend mentor for the assignment
- According to suggested method by frontend mentor, you can focus on one element styling at a time. only after some satisfactory change, move to the next element.
- For example: Start with body element make the height of the body to 100vh. And then use flexbox to justify and align the element center.
- After that you can start with the main container itself. style it with consistent height and width (mentioned above). Once the size of the parent element is done, now you can style the image component.
- You can make the image-width to 100%. This way the image will cover the entire width of its parent, which has already been set to consistent size.
- Add padding to qr-container and background color white.
- Follow the instruction in the readme.md and style-guide.
1
Please log in to post a comment
Log in with GitHub
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