@Ahmed-Elbald
Posted
Al Salam 3likum Abdulrahman,
-
Regarding your question about the empty space at the bottom, I think you just forgot to set the
line-heightproperty 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
@aazs-edu
Posted
@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.
@Ahmed-Elbald
Posted
@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
classattribute, try not to make its value generic. Class names likecarddo not imply any meaning regarding the content of that element. Instead, try changing it to something that is more meaningful.testimonialwould 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
@Ahmed-Elbald
Posted
@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
@aazs-edu
Posted
@Ahmed-Elbald, Yup, I see what you mean. The data is being fetched from API, and we cannot guess the content's height.
