Submitted 6 months ago

Responsive Testimonial Cards

DivasJaglan• 170

@DivasJaglan

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Proud of completing this new task. Next time I will get more prepared for the grid layout.

What challenges did you encounter, and how did you overcome them?

I faced challenge in aligning the cards in the desired position for the desktop mode. The I used the chrome developer tools for help which came in so handy for that.

What specific areas of your project would you like help with?

I think my grid section need some more improvement in the media query. I am not that good in designing with grid at this moment. 🥲

Community feedback

Nikki• 160

@nicolette-codes

Posted 6 months ago

Hello,

I have a bit of advise for you.

In your markup you do not use the main & section elements

i.e. you could replace the <div class="container"></div> with this

<main>
   <section class="testimonials">
        .... here goes the rest of the markup
   </section>
</main

Your img elements are missing text in the alt attribute.
You should set a fixed with or better maximum width on your grid container for desktop version. Otherwise it won't stop growing in width and starts to look weird.

Marked as helpful

DivasJaglan• 170

@DivasJaglan

Posted 6 months ago

Thanks for the advise 😃. I will definitely work on it.@nicolette-codes

Please log in to post a comment

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