Design comparison
Solution retrospective
I'm proud that I finished this second challenge faster and more easily compared to my previous one. I can see some progress at least. Next time? I think I should experiment more to better understand how different elements should behave in a layout.
What challenges did you encounter, and how did you overcome them?The first challenge I encountered was figuring out the right width for the div container to match the challenge preview. Not to mention, I was also experimenting with the proper margin and padding to use. Thanks to the style guide, of course, for providing a helpful reference for fonts, colors, and other design details.
To overcome this, I experimented with different width values, used DevTools to inspect element sizes, and adjusted the padding and margin until the layout closely matched the preview.
What specific areas of your project would you like help with?Experimenting with the proper values to closely match the challenge preview is time-consuming and requires a lot of trial and error. Is this just the way it is, or is there a way to improve the process?
Community feedback
- @acekantPosted 29 days ago
Hello AllanKyleV, I am Dheerendra Kumar, frontend mentor as you. You mentioned that you need help in pixel perfect design making or getting design as close as to solution. Well you can use some tools like microsoft powertoys. it a basic tools software which contains a tools name ruler which can be turn on by run 🪟+ctrl+shift+M, a tool bar will be affear no go to desgin file of challege, for example mobile design and zoom out or zoom it so that its with get close to 375px when you mesure using the tool and after this now you can calculate the width of other element easily with reference of desgin and now open brower open dev tools set width to 375px on this. or you can use simple same width like if you zoom the image of design and the width of image is increase measure it using tool and make your browser window to the same width of the design now all set.
If you need futher help on this topic don't hesitate to ask
2@AllanKyleVPosted 29 days ago@acekant Thank you so much for the helpful tip! I appreciate you taking the time to share this with me. The Microsoft PowerToys tool, especially the ruler feature, sounds like a great way to ensure pixel-perfect design alignment. I'll definitely try out your suggestions, and I’m sure they’ll make the process a lot smoother.
I might have a few more questions as I continue working on this, so I’ll be sure to reach out if I need further assistance.
Thanks again for your support!
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