@ghintema
Posted
Hi Lahiru,
I reviewed your solution and would like to give you some feedback. What rises most my curiosity is this: Why building two different <nav></nav> areas in html?? You have one for desktop and an extra-one for the slidebar. Don't you think it would have been better using only one for both devices?
When sliding the viewport from small to large to x-large, you put the extra available space in the center of the design, seperating the two main columns. I personally think it's better to keep the layout and item-distances constant and put extra white-space left and right of the design instead. What do you think about the idea? Furthermore, the different adaptions from mobile to desktop (for example change of picture, letter-sizing, layout-changes...) aren't really synchronized. For example at viewport=900px you see the mobile-one-column-layout in combination with the large desktop-picture. You could think that both of these things aren't really an issue, as you usually don't slide your viewports and you only use one fix device at a time. But things really get irritating (if not annoying) when you start zooming in and out of the page. That's when you notice all these things. My proposal: Make one complete change from mobile to tablet to desktop, once there is enough space available.
I hope this feedback helps you! That's really all I want to do! If you have further questions on my comment, don't hesitate to ask them. And here is my solution to this challenge. Fell free to test and comment it as well. :) Cheers, Harm
https://www.frontendmentor.io/solutions/introsectionwithdropdownnavigation-fully-css-no-js-qPsLKPlTKg
Marked as helpful