HTML,Scss
Solution retrospective
Second challenge completed... I really need a break. I was so close to burnout.🤣
What I did and tried in this challenge:
- created 2 reusable minxins to create buttons and gray-pattern-blocks on the page.
- tried using helper classes, but I didn't bother it too much.
- used Sass partial to make code smaller
Challenge 3 is coming soon! 😉
Please log in to post a comment
Log in with GitHubCommunity feedback
- @UDsGitHub
Hi Henry, I just saw your site and it looks great. My only comments would be on the first keyboard images pseudo element. I dont know if its supposed to be there or its more of a design element from the background because I have not attempted this challenge, but yeah I think that is what is causing most of your issues with responsiveness on smaller screensizes. I think just like Aakash has said above, you should add overflow hidden to your container element, but also make those pseudo elements absolutely positioned so that they dont affect the flow of other elements. I just noticed you already have them on absolute positioning, but yeah. Start first with the overflowhidden and work your way to figuring out the content spill on the smaller screens. Good luck 👍
Marked as helpful - @skyv26
Hi! Henry, Well done you completed this challenge and you also learnt alot from this challenge. But let me help you in increasing your knowledge.
In your mobile response, your whole layout is going outside the viewport. Make sure that you have aligned your layout horizontally, make sure your width is 100% in mobile media query and also make your outermost container with overflow: hidden.
Good luck!
Marked as helpful
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