Design comparison
Solution retrospective
Hello everyone!
So, I've completed around a dozen challenges so far and some still puzzles me a bit.
When I download the starter files, in the style.md there is a section where the dimensions for the design are written out, e.g. desktop 1440px. What is a more correct approach, to make the design exactly as it is on 1440px or making it exactly as it is but on my viewport size (e.g. 1704px).
I'm asking because sometimes a design that is okay on 1440px can seem so "off" on my actual viewport size, and vise versa of course. If I do it according my viewport size, then the screenshot generated when I submit the solution is completely off and I cannot really compare the results (I have redone a couple).
Really interesting to hear someone else opinion on this, any feedback would be very much appreciated. Thank you!
Community feedback
- @hitmorecodePosted over 1 year ago
You forgot to upload the css file to github. There is no style on the page, so it's hard to comment.
Regarding the given desktop dimension of 1440px, I personally use this as the width of my container and not as the viewport itself. Your work doesn't need to be 100% like the design, if you are in the range of 90% to 95% then it's ok. I change the fonts size all the time, just because the font size on the style guide file sometimes seem to of. As long as you can recreate the layout and it's responsive it's ok.
Marked as helpful1@MarioMinchevskiPosted over 1 year ago@hitmorecode
I was doing a minor adjustment, so probably the cause of the hiccup. Everything is up on the repository now. If you want to check it out, would help a lot :)
As for the given desktop dimension, yeah makes sense. I would feel more comfortable like that as well. But sometimes I do have the urge to nail the design almost pixel perfect hah.
0@hitmorecodePosted over 1 year ago@MarioMinchevski I used to be like that too every time I wanted to upload finished challenge, it would take me like 1hr or more. Sometimes the uploading took me longer than doing the challenge. Just to make it pixel perfect 😅. Now if it's close to the original I'm happy with it.
I took a look at what you did and it looks good, I would only change one thing, the breakpoint, set it to 1150px. When going lower than 1150px the elements start to overlap and this only gets corrected at 376px.
Marked as helpful1 - @AnisBachaPosted over 1 year ago
My recommendation is to utilize the breakpoints available in Chrome's devtools (inspect). By adjusting the page width to 1440px in the Chrome browser using devtools (inspect), you can work to replicate the same desktop design accurately, and then you can focus on making the page more adaptable for different desktop sizes.
Marked as helpful0
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