CSS Grid Testimonials!

Community feedback

• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Hi Musha,

  To add upon Vanza's feedback, you could change the breakpoint of your media query to @media screen and (max-width: 1150px) and adjust upon that. This is because your implementation will not look pleasing for tablet devices. Try to make sure that your site will be responsive as possible.

  I hope it helps :)

  Marked as helpful

  2
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Musha!

  I have some feedbacks on this solution:

  • All page content should live inside a landmark. Swap .attribution div with footer tag. This should fix the issue.
  • I notice that for every bold text you used h1. Heading tag is not used for styling purposes. Heading tag is used to give structure to the page, think of it as document file. Also, only use one h1 for every page. So, I would recommend to make the every person name to h2.
  • For any decorative images, you should leave the alt="" empty and add aria-hidden="true" to make screen readers ignore those images. In this case the only informative images are the profile pictures (person photos).
  • To select an element on CSS, I would recommend to select the element using its class name instead of id. Using id will increase the specificity unnecessary and it's also a bad practice. Try to use BEM class naming convention. It will make your stylesheet more maintainable.
  • Also, you don't need to add the element, just the class name whenever possible.

  /* Unnecessary to do */
  div.attribution {
    /* Some styles */
  }
  
  /* Keep the specificity as low as possible 👍 */
  .attribution {
   /* Some styles */
  }
  

  • Use rem or sometimes em unit instead of px. Using px will not allow the user to control the size of the page based on the user needs.
  • Try to give meaningful name to every grid-area item. It will make everyone including you in the future understand what's going on on your stylesheet.

  That's it! Hopefully this is helpful!

  Marked as helpful

  1