responsive grid a11y news

Community feedback

• 

  P

  Eli Silk•660

  @elisilkPosted about 1 month ago

  Hi 👋 @35degrees,

  Congrats on a very nice solution. 👏 I like how you implemented the hamburger menu using only CSS. Very cool!

  If you are up for diving in just a little further 🤿, I'd suggest a few things:

  • First, when you have different versions of the same image, like you do for the banner image in this challenge, consider using the <picture> element. This will help ensure the correct image loads on the user's device, saving bandwidth and boosting performance. For example:

  <picture>
      <source media="(min-width: 768px)" srcset="{desktop image path here}">
      <img src="{mobile image path here}" alt="{alternative text here}">
  </picture>
  

  • Second, when I open your solution on my browser and move to a smaller viewport width, for me, the height of the content extends beyond the viewport height and there is scrolling down but not up. And so the top of content (the nav and part of the banner image) is cut off and not accessible. One option to fix this would be to adjust how you set the height attribute of your .main-container in your CSS. Specifically, try changing the height attribute to instead be min-height. Doing that will allow the container to fill up the entire viewport height (as you had it originally), but now it will also allow the main-container it to extend beyond that viewport height when needed. Like this:

  .main-container {
      min-height: 100vh;
  }
  

  Anyway, just some ideas to consider if you are thinking about improving on this solution. 🤔

  Great job overall! Happy coding. 💻

  Eli

  Marked as helpful

  0
• 

  P

  Sam Hooker•680

  @35degreesPosted about 1 month ago

  Very helpful feedback, I appreciate the insight and support!

  0