Responsive CSS Grid Solution

Community feedback

• 

  Heli0s•670

  @zeerobitPosted almost 3 years ago

  Good work completing this challenge. Your grid template columns value is what's causing the issue you're having, here are a few pointers:

  • change grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); to `grid-template-columns: repeat (4, 1fr);
  • to center your grid properly remove margin: 8vw 0; from .grid then from your .content class change justify-content: space-between; to justify-content: center;
  • Add this to your media query to fix your layout for mobile:

  .grid {
      grid-template-columns: 1fr;
    }
    
    #Daniel {
      grid-column: 1;
    }
    
    #Patrick {
      grid-column: 1;
    }
    
     #Kira {
      order: 2;
    }
  

  • As suggested by Dev, to fix the accessibility issue, replace the div element for your content class to main, also wrap the attribution section in a footer
  • It'd be much easier to build this layout using grid area, here is a grid area tutorial check it out
  • use rem instead of px since px is not scalable
  • for this type of testimonial card design, the proper html semantics to use would be figure to wrap the content of each card, figcaption to wrap the names, title and blockquote to wrap the paragraphs. You can read more about it here
  • Replace the h4 tags to p since they're paragraphs and not headlines
  • Adding a css reset can prevent weird browser behavior, i use this one

  Hope you find these helpful, happy coding!!!

  1
• 

  optimusprime202•1,200

  @optimusprime202Posted almost 3 years ago

  Hey @natashajvandam, Tremendous work!

  0
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  Hay ! Natasha Good Job on challenge

  These below mentioned tricks will help you remove any Accessibility Issues

  -> Add Main tag after body <main class="container"></main>

  -> Learn more on accessibility issues

  If this comment helps you then pls mark it as helpful!

  Have a good day and keep coding 👍!

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Reduce the accessibility change this code👇

  <div class="content" > to <main> ( used main tag ) I hope you find this helpful

  0