Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle landing page with alternating feature blocks

mycrochip 460

@mycrochip


Design comparison


SolutionDesign

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 GitHub
Discord logo

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