Intro section with dropdown navigation

Community feedback

• 

  P

  Harm Intemann•590

  @ghintema

  Posted almost 3 years ago

  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

  00

  Marked as helpful
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-Montano

  Posted almost 3 years ago

  Hello Lahiru! Congratulations for your solution.

  A bit of design is lost with a screen width less than 325px, I know that today there are few cell phones with those measurements, but just in case I recommend that you design for screens up to 315px at least. The "learn more" button is placed below the logos from 900px wide to 1300px approximately, you must fix that. On the other hand, I see that in the HTML you have two ul with the "features" class and I understand that one is for mobile and the other for desktop, that is not correct, you must implement only one and with CSS you adjust it according to the width of the screen.

  I leave you the link to my solution as you requested, although it is made with Angular.

  Solution

  Cheers!🦾🦾🦾

  00

  Marked as helpful