Huddle landing page with alternating feature blocks
Design comparison
Solution retrospective
As expected, I learned a lot from completing this project on Frontend Mentor. I added another word to my vocabulary of "don'ts" - setting elements to be 100vw (full viewport widths). Doing this makes a persisting horizontal scroll bar appear at the bottom of your page and could lead to debugging problems. In my case, I tweaked and tweaked till I 'control zeed' to oblivion.
The problem with using 100vw is that a portion of your viewport has been set aside for your compulsory side scroll bar when content gets reasonably longer downwards. Now, you're ignoring the scrollbar and letting your element span the full device width. The horizontal scroll bar exists to help you scroll to the content behind the vertical scroll bar because this scroll bar will always be above your content. To avoid this headache, just set all widths to 100% when you need them. They will take 100% of the space allocated to them (this excludes the pixels reserved for scrollbars)
Community feedback
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