Testimonials grid section

Community feedback

• 

  Kevin Walker•140

  @kwalker3000Posted over 2 years ago

  Hello Mark!

  I think you did a great job.

  I especially like how you made use of CSS custom properties. I'm really bad about that and always forget.

  Something you might want to think about in the future is adding a bit more whitespace. I think appearance would improve by increasing .person's padding, grid-gaps, and line-height.

  Also, roughly from screen size 385px - 510px there is side-scrolling. (Something I've also had issues with in the past)

  I found that if you move the .container you have at the bottom wrapped in a media query, and instead place it in front of your previous .container declaration (ln 24). While also moving that media query you now have at the top, to the second .container underneath and giving it a min-width of 825px. Works quite nicely.

  Best of luck to you, Mark.

  1
• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills🛠️

  about you question: which best practices should I apply to make my code cleaner and presentable.

  answer:

  ✅ pay attention to the automatic report on your solution. you need to fix html and a11y errors

  ✅ use the mobile first approach. You could avoid this code by requesting min-width: 376px and placing the code responsible for placing the cards

  @media (max-width:375px) {
      .container {
          margin: auto;
          display: grid;
          grid-template-areas: 
          'daniel'
          'jonathan'
          'jeanette'
          'patrick'
          'kira'
          ;
          grid-template-columns: 1fr ;
          grid-template-rows: 1fr ;
          gap:2rem;
          width: 90%;
      padding-block:3rem;
  
      }
  }
  
  

  ✅ You Need to Stop Targeting Tags in CSS. When you add CSS directly on tags, your markup can’t change. Your style is tightly coupled to your DOM, and any change increases the risk of breaking things.

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  1