Design comparison
Solution retrospective
What tools do you use to make sure your code solution is "pixel-perfect" when you don't have access to the measurements in design files?
Community feedback
- @Mr-jawPosted over 1 year ago
Hello,
I'm not sure about Mac, but in Windows, there is a software that I personally use and find extremely helpful. It is called "PowerToys," developed by Microsoft Corporation. You can install it through the Microsoft Store. There is an option called "Screen Ruler" which will help you get more accurate measurements. It also has many other useful functionalities that you may find interesting.
Marked as helpful0 - @Q8LPs6VsPosted over 1 year ago
If I don't have access to the design files I'll just use whatever styles are provided, a color picker, and then eyeball the rest. Don't worry too much about getting pixel-perfect results. Visually your solution is perfectly fine IMO.
You probably want to replace the height on .container with min-height, so your design doesn't get cut off with smaller viewports.
As far as the design itself is concerned, I'd personally bump up the font weight of the "per month" and the "Why us" section a little bit. Also there's a box shadow on the component that you could add.
Really good job!
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