Design comparison
Solution retrospective
Hi! I would love to hear some feedback if there things I did wrong.
Community feedback
- @VenusYPosted 8 months ago
Hey! I had a look at this project as you requested, and it's really good! Almost no issues at all from what I can see.
The site is responsive, and it resembles the design very closely.
The only thing I would suggest is that you should consider using
padding
instead ofmargin
for the whitespace around the edges of the page.This is because using margin makes it so that the site has scrolling at all times, even if the user's screen size is tall enough to fit all the content.
Using
margin
causes this issue because it's not considered in the calculation of the element's width or height, even if thebox-sizing
is set toborder-box
.border-box
only includes padding and border as part of it's width or height.So this in combination with
min-height: 100vh
means that the height of the webapge is always going to be 100vh + whatever the margin is, causing the scrolling issue.I hope this explanation has been helpful, but if not, please feel free to ask me questions, and I'll try my best to clarify.
body { margin: 2rem; ❌ padding: 2rem; } @media screen and (min-width: 800px) { body { margin: 4rem; ❌ padding: 4rem; } }
Other than that, you did a fantastic job at this challenge, and I can see that you're improving a lot! :)
Marked as helpful1@RodRyan19Posted 8 months agoThank you so much! I was actually wondering why the scroll happens. New knowledge added, thanks as always!@VenusY
1@VenusYPosted 8 months ago@RodRyan19 No problem! I'm glad I managed to address your concerns.
Good luck with your future projects! :)
Marked as helpful1 - @Ezekiel225Posted 8 months ago
Hello there 👋 @RodRyan19.
Good job on completing the challenge !
Your project looks really good!
I have a suggestion about your code that might interest you.
📌If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.
It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!
I hope this suggestion is useful for future projects.
Other than that, great job!
Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.
Happy coding.
1@RodRyan19Posted 8 months agoThanks! yep, ive tried it but not really a fan on using it.@Ezekiel225
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