Design comparison
SolutionDesign
Solution retrospective
Feedback Welcome!
Community feedback
- @ratul0407Posted about 1 year ago
@GerryL2 Congratulations on completing this challenge🎉🎉
The solution is great but I think there are some things that you might consider changing:
- Pay more attention to mobile layouts and maybe try to replicate the mobile layout first and then the desktop one.
- After the egg image (transform) on the paragraph (we are full-service creative...) you've set a specific
width
of77%
. Now it might look good on desktop sites but doesn't look that great on mobile devices. And the same goes for the other one (stand out to the right audience...) where you explicitly set width to yourh2
andp
. Remove it you don't need it for mobile devices - On the mobile viewport the (graphic design..) section has collapsed the text is floating on top of the image. To solve it you can go for
bottom:0
instead of20%
or you might consider removingposition: absolute
and then maybe on thediv
set abackground-color:#a1dbcd;
or the same as your footer. Then place it under the graphic design image as you would like. - On your
<h1>
you have set a z-index of 50 and on your mobile navbar you have also set a z-index of 50 that's why it's crashing with the<h1>
text. Tweak with the z-index number of the navbar to fix the issue. But I would recommend you to remove the z-index from the <h1> as I don't think you need it.
I hope it was helpful for you👍👍
Happy coding my friend🙂🙂
Marked as helpful1
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