Design comparison
Solution retrospective
I'm really proud of making this challenge without @media (…){…}
. I think It will really help me to build better website in the futur. This is a great new way of thinking.
I didn't know about the child size when you use flex-direction:column;
. Tanks @gmagnenat for the help about this specific part.
I need to try to use more fluid properties like min-width or min-height and also value en fonction like clamp(…). If you know some good read about it…
Community feedback
- @gmagnenatPosted 4 months ago
Hey ! Congrats on completing the challenge. There is a great improvement from your previous one. I still recommand you go and fix your QR-code challenge ;) you will practice refactoring and documenting your changes.
I noticed one issue here.
- you set a height:100svh on the <main> element. Learn how to update your browser default font-size to test this. Currently your preview card will be cropped at the top and bottom because the height is set to a fixed value. You need to change this to a
min-height:100svh
instead and it will be fixed.
Happy coding !
Marked as helpful0 - you set a height:100svh on the <main> element. Learn how to update your browser default font-size to test this. Currently your preview card will be cropped at the top and bottom because the height is set to a fixed value. You need to change this to a
- @lynaIFRPosted 4 months ago
Great work, I noticed that in the CSS reset there are elements that don't exist in the HTML code, you may want to delete them, other than that the code is clean and well written.
0@gmagnenatPosted 4 months ago@lynaIFR I would not remove stuff from the reset. What if more components are added later to the project? And if the project gets bigger?
It's better to leave the reset like it is in my opinion.
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