css grid, fetch API, responsive design

Community feedback

• 

  Williams Akanni•350

  @shadowbanks

  Posted 5 months ago

  Hello Itoro,

  Congrats on completing the challenge 🥳, great work 💪🏿

  Here's my review

  • Active menu: The active menu isn’t working on the first render and only activates on mobile views. You might want to look into fixing this.
  • Responsive Layout:
    • Between 500px - 700px width, part of the content gets cut off, I'd recommend using media queries to target medium screen size for better responsiveness.
    • For the height above 859px, the profile and work cards are the only ones expanding to fill extra space. This seems to happen due to using grid-template-rows: repeat(2, 1fr) for mobile view. To address this, you could add grid-template-rows: repeat(7, 1fr) to the media queries targeting mobile devices, so the addtional space can be evenly distributed.
  • Console logs: It’s a good idea to comment out the console.log statements in your JavaScript for cleaner code.
  • CSS Tip: You can create a common class for the card divs to avoid repetition. For instance, you could add a .card class and use it to apply common styles across all cards:

  .card{
    background-repeat: no-repeat;
    background-size: fit;
    background-position: top right;
  }
  

  This will help you avoid repeating the same code for each card.

  I hope these tips are helpful. Keep up the great work, and happy coding :))

  00