Design comparison
Solution retrospective
Hi,
This challenge was not so easy. It it my first solution where I compare my design with original one using PixelPerfect. I also used CSS Grid, CSS Flexbox and BEM.
I have coded mobile and desktop version and then I compare it with original design and made approvements. Is the way how to work with PixelPerfect? Do you have any other hints or suggestions? I am not satisfied with mobile version. On very small screen 360px on the left side there is a blank space and I do not why how to remove it.
When it comes to svg, I have noticed that I could override width and height of phone nad email icons /footer section/ without setting viewBox in HTML. This did not work in case of Fylo logo. Have you encounter similar situation and could you explain me why that happens?
Thank you in advance for your help and hints!
Community feedback
- @ApplePieGiraffePosted almost 4 years ago
Hey, again, Marta! 👋
It's nice to see you complete another challenge (of course)! 😀 You're improving with each solution that you submit, and I think you've done a good job on this one! 👏
When I work with PerfectPixel, I usually load the JPGs into my browser before I start coding, and then as I build each part of my website, I periodically check to see how my work lines up with the original design. I usually only do this for the desktop layout, though, and eyeball things for the mobile layout. 🙃
I think the size of the text on the page is quite large in the mobile layout, and that's causing some overflow issues (which is why you are getting white space to the right of the page in the mobile layout). I suggest decreasing the font-size of things in the mobile layout a bit and making sure the email at the bottom of the page doesn't overflow the body (which seemed to be causing the issue). 😉
I also suggest adding a max-width to the content of the page since it begins to look quite stretched on extra-large screens.
Of course, keep coding (and happy coding, too)! 😁
1@martam90Posted almost 4 years ago@ApplePieGiraffe Thank you for your answer and hints! I always appreciate your feedback. :) I tried to code mobile version based on original mobile design so now I understand what caused overflow.
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