Design comparison
Solution retrospective
- Feedback would be appreciated, I will mark it as helpful. 🙏
Community feedback
- @Ahmed-ElbaldPosted 11 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 helpful1@aazs-eduPosted 11 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-ElbaldPosted 11 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 likecard
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 helpful1@Ahmed-ElbaldPosted 11 months ago@aazs-edu
Concerning accessibility issues, I've noticed your markup mainly consists of the following element:
div
,span
andp
. 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 hereYou could also use the
figure
element for thatMarked as helpful1@aazs-eduPosted 11 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 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord