Submitted about 4 years ago

Testimonial-grid-section using CSS Grid, Sematic HTML5 & Custom CSS

@Skyz03

A solution to the Testimonials grid section challenge

Solution retrospective

This was a relatively great challenge once you get the grips of CSS grid area which made it so easy. but I couldn't align the exact same heights for text even if the box size matches plus if their is any simple alternative for background positioning by not using position: absolute; And anymore feedback to take it to the next level is highly encouraged! 👍 Thanks for making a great community.😊

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

tediko•6,700
@tediko
Posted about 4 years ago
Hello, Sky! 👋

Good job on this one! 🎉 Your solution responds well and overall looks good. Here's my suggestions:
- I think in this case position: absolute is a best way to align this quote marks image but you shouldn't put that image into your HTML and instead you should use ::before pseudo-element on .card-one container. Set that pseudo-element to be position: absolute and within your content property add image url - content: url(../images/bg-pattern-quotation.svg);. Then position it with top & right properties.
- Change the alt attributes for the .profile-img avatars, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies. You can change .profile-name to be your heading <h1-h6> element and it will be enough do describe this card in addition with .profile-position.
Good luck with that, have fun coding! 💪
Deep•235
@deepchhatralia
Posted about 4 years ago
You can try using display-flex and then use align items and justify content

Join 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