Responsive Testimonial Grid Section

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello DurgaDevi, Congratulations on completing this challenge!

  Here’s some tips to improve your solution code:

  1.Remove some divs, the only block inside the card that need a div is the profile + jobtitle section the rest of the text doesnt need it.

  2.Give the container the correct size to avoid it growing more than it should: max-width: 1115px;

  .container {
      max-width: 1115px;
      min-height: 100vh;
      font-size: 13px;
      background-color: var(--light_greyish);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  3.Improve your html markup using meaningful tags and replacing the divs. In this case, for example the main block/div that takes all the content can be wrapped with <main> or section, if you think about = the cards you can replace the <div> that’s wrapping each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Note that <div> is only a block element without meaning, prefer to use it for small blocks of content inside bigger blocks wrapped with some better markup.

  Here's a complete guide for HTML semantic TAGS: https://www.w3schools.com/TAgs/default.asp

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  2

  ---

  

  DurgaDevi Shanmugam•70

  @DurgathevPosted about 2 years ago

  Hello @correlucas , thanks for the suggestions. I'll implement it.

  I'd glad to hear you again😊👍.

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @Durgathev Thanks Durga, keep posting amazing challenges!

  1

  

  DurgaDevi Shanmugam•70

  @DurgathevPosted about 2 years ago

  @correlucas I definitely will.I have been learning a lot from challenges. Thanks for helping me improve the layout with your valuable feedback.

  1
• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  Hi DurgaDevi, how are you?

  Congratulations on doing another challenge, you are improving a lot. I really liked your project but I have some tips for you:

  I noticed that the layout was growing a lot at higher resolutions, to fix this we can do the following:

  .content-page { max-width: 1180px; }

  I changed the value of max-width, to prevent the content from stretching.

  I noticed that the text of the cards was breaking out of their div, to fix this we can do the following:

  .testimonials { grid-template-rows: auto; }

  Do this in the mobile media query too, that way the height of the card will adapt to the size of the content that is inside it.

  Congrats on the result, keep coding 😊

  The rest is great! Hope it helps... 👍

  Marked as helpful

  0

  ---

  

  DurgaDevi Shanmugam•70

  @DurgathevPosted about 2 years ago

  Hi @AdrianoEscarabote , I'm doing great. Hope you are doing well and safe.

  Thanks for your valuable feedback and time. :)

  0