Responsive Sunny side landing Page .. React, Sass

Community feedback

• 

  Efosa Collins EVBOWE•365

  @efecollinsPosted about 2 years ago

  Hi @Merxibeaucoup, congrats on completing this challenge. I have a few things I think you should do if you would:

  • The nav bar can't be closed, I had to refresh the page to make it go away. Kindly, follow the replies above to solve that.

  • The background image for your .header div is moving from its place. Add a background-position: center; to make it go nowhere.

  Keep pushing forward on your coding journey. Cheers 👍

  1

  ---

  

  Edgar Briandt•140

  @MerxibeaucoupPosted about 2 years ago

  @efecollins thank you very much

  0
• 

  Wendy•1,970

  @wendyhamelPosted about 2 years ago

  Hi, I noticed the overlapping icons on mobile too. The close icon is also hidden when you open te menu, so users have no way to close it. Next thing I noticed is in between screen sizes from 601px to around 1024px there are issues in yout responsive layout. Things overlap and overflow.

  Did you notice there is a design example for the hover states? I only see them in your footer. But not in the main menu or for the 'learn more' buttons.

  Happy coding!

  1

  ---

  

  Edgar Briandt•140

  @MerxibeaucoupPosted about 2 years ago

  @wendyhamel I only did mobile screen responsive.. I will fix all screen sizes , thank you very much

  also I used pseudo elements to create that border underneath the "learn more" link .. and you cant hover a pseudo element..

  if there's a better way to create that border I would please move to learn from you , thank you

  0

  

  Wendy•1,970

  @wendyhamelPosted about 2 years ago

  @Merxibeaucoup Good that you fixed the menu close button issue. As for the 'learn more' links, you do not have to hover the pseudo elements, but you hover the <a> element. Like this: .your_link_class:hover::after { -- put your change on hover states here -- }

  There are other ways to do this, I used a span and positioned it. But that's not neceessarily better, just my preference.

  Happy coding!

  0
• 

  Hossam khalaf•230

  @hossam-khalafPosted about 2 years ago

  Good Job With The Design Edgar! I see a little Problem with the Mobile Nav, The Bars icon doesn't disappear when clicking on it and it shows alongside with Times icon. The quick fix for that is to use conditional rendering with (useState hook) on the icon itself.

  also, you can use (position:absolute) on the mobile nav to match the design.

  I like the animation so much though.

  Good Luck :)

  0

  ---

  

  Edgar Briandt•140

  @MerxibeaucoupPosted about 2 years ago

  @hossam-khalaf Thank you , I fixed the issue.I just had to wrap the button icon with an li tag.. to include it in the list

  0