Mobile-First Testimonials Grid Section

Community feedback

• 

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted 10 months ago

  Al Salam 3likum Abdulrahman,

  • Regarding your question about the empty space at the bottom, I think you just forgot to set the line-height property on your fifth card's quote. The problem is in this CSS rule:

     // Try adding (.card-5 .review-quote)
      .card-1 .review-quote, .card-2 .review-quote, .card-4 .review-quote {
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.65;
     }
     // More better, you can do something like this:
      .card .review-quote {
      // Your props here
    }
    

  I've noticed some other issues concerning accessibility and code structure. If you are interested in solving them, just let me know.

  Thanks.

  Marked as helpful

  1

  ---

  

  Abdulrahman Zaki•330

  @aazs-eduPosted 10 months ago

  @Ahmed-Elbald, Walaikum assalaam Ahmed,

  • Yes, I completely forgot. I have just updated the code. Thank you very much. ❤️.

  I'm definitely interested. Your insights are valuable to me. Please feel free to share any suggestions you have, and I'll be more than happy to work on solving them.

  0

  

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted 10 months ago

  @aazs-edu

  Before that, I just want you to know that the empty space problem isn't really a problem. In real-world application content is usually dynamic, thus content won't usually fit in the way you like. I would say that the older version (with the empty space) is not a problem at all.

  Besides that, I've noticed the following issues:

  • When you add the class attribute, try not to make its value generic. Class names like card do not imply any meaning regarding the content of that element. Instead, try changing it to something that is more meaningful. testimonial would be great.

  • I would suggest using the BEM naming convention for better class names and better code structure. By doing that, your classes would look something like this: .testimonial, .testimonial__header, .testimonial__content, .testimonial__title, etc.

  Marked as helpful

  1

  

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted 10 months ago

  @aazs-edu

  Concerning accessibility issues, I've noticed your markup mainly consists of the following element: div, span and p. However, I think there are places where those elements are irrelevant to use.

  Let's break it down.. You have a couple of testimonials. Every testimonial has the following: author and their title, testimonial body or content. So, your markup should look something around that:

  <div class='testimonial'>
    <div class='testimonial__header'>
     <img src="..." alt="..." />
     <p>{{Testimonial Author Name}}</p>
     <p>{{Testimonial Author Job/Title}}</p>
    </div>
    <blockquote class='testimonial__content'> // The separation of paragraphs is just for styling purposes
      <p class='testimonial__title'>{{Testimonial Title}}</p>
      <p class='testimonial__main-quote'>{{Testimonial Content}}</p>
    </blockquote>
  </div>
  
  

  You can read more about the blockquote element in here

  You could also use the figure element for that

  Marked as helpful

  1

  

  Abdulrahman Zaki•330

  @aazs-eduPosted 10 months ago

  @Ahmed-Elbald, Yup, I see what you mean. The data is being fetched from API, and we cannot guess the content's height.

  0