Design comparison
Solution retrospective
Hi everyone, a feedback will be appreciated :D
Community feedback
- @trekabPosted over 2 years ago
Nicely done, @Yahir-am! I like your use of CSS variables. They make your CSS readable and more maintainable. However, here are some suggestions to make your page look even better:
- The mobile version appears to have some excess bottom white spacing after the button. Clearing this would make your page look more like the design spec.
- It would also be great to provide a fallback font whenever you specify a font family in your CSS. e.g.
font-family: "Montserrat", sans-serif;
would imply thatsans-serif
is the fallback font. I find the introduction of this article(CSS Fallback Fonts) insightful about fallback fonts. - Finally, writing mobile-first CSS is a nice practice to follow when building responsive web pages. Here is a great article for more insight.
I hope you find this feedback beneficial
Happy coding!
Marked as helpful0 - Account deleted
Hi Yahir,
Great solution! This is looking really good.
The only thing I would suggest is limiting the height on mobile/smaller screens - The width resizes nicely, however the height adjusts to the screen's size without there being any content, so you end up with a lot of empty white space below the button.
Other than that, this looks spot on! Well done 😊
Marked as helpful0 - @Feyisara2306Posted over 2 years ago
Well done! You have no issue at all. I just completed the same project but it isn't as perfect as yours. I've got some questions if you don't mind, how did you centralize the elements on the page? and also, the display I get on my browser when coding isn't the same as the one that shows with the live site url, I want to know what I'm doing wrong, Thanks.
1
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