My Sunnyside Solution!

Community feedback

• 

  Andre Ferreira•450

  @Namonaki0Posted about 1 year ago

  Hi Gilson, well done for completing the project.

  Here are some points I came across when previewing your solution. This is not an extensive list.

  • The burger menu is not visible in mobile view and there are some issues with image placement like you mentioned.
  • When you shrink the viewport the content underneath tends to hinder the hero section and therefore conceal the down arrow of the project.
  • Images and text don't follow the mobile design specified, not that big of a deal but will need better spacing at least to be more visually balanced.
  • Client Testimonials section is also being superimposed and names are hidden in mobile view, they do show on bigger screens but there is no space between this section and the next.

  If you like I can have a deeper look into your code and make some changes that might help you. I would explain every step as always. What I can do is clone your repo and then send you a PR when I'm finished. You won't need to merge it or anything but at least you can have a look at the differences. Let me know if this works for you.

  Marked as helpful

  1

  ---

  

  Gilson Roberto dos Santos•200

  @GIR0SANPosted about 1 year ago

  Thanks for the help, @Namonaki0

  1

  

  Andre Ferreira•450

  @Namonaki0Posted about 1 year ago

  @GIR0SAN I have sent you a PR just for reference.

  In short:

  • Header arrow and testimonials section overlapping issue on smaller screens no longer present.
  • Image elements will by nature create space around them and in order to fix this we can use display: block;.
  • No need to add classes to semantic HTML tags that are only used once in the file, i.e: <nav>
  • Navigation links now show when screen size is increased while burger menu triggers in mobile view. It's always easier to use the mobile-first approach and work with min-width for your media-queries.
  • Aria-labels introduced for accessibility.
  • Grid positioning for .l-grid__section, .l-images__grid and testimonials section achieved.
  • Lazy loading added to images.

  I had a look at structure, readability and best practices mainly so things like pixel perfecting would still need to be looked at, i.e.: line-height, colours, font-size, hover effect in navigation links, etc...

  I hope this helps.

  Marked as helpful

  1

  

  Gilson Roberto dos Santos•200

  @GIR0SANPosted about 1 year ago

  @Namonaki0 Wow, once again, thank you very much! I will implement the suggestions. :)

  1