Skip to content
Submitted over 3 years ago

Testimonial grid section (SCSS, BEM, Semantic HTML, Mobile first)

Franco A.•200
@franco-a
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hey! I'll admit this took longer than usual, css grid can be a headache at times. If anyone has tips and tricks when it comes to css grid then I'd appreciate it if you could share them!

Community feedback

  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Franco A! 👋

    Congratulations on finishing another challenge! Again, good job! Grid is really powerful when it comes to layout things. In your solution there's only mobile version and desktop version. Try to add some media query and made your grid to take 2 columns and 3 rows in tablets resolution. Take a look at minmax notation that defines a size range greater than or equal to min and less than or equal to max for grid-template-columns. This is my solution to this challenge. I know it is a bit old but you'll see my idea.

    • Change the alt attributes for the .testimonials__author-image avatars, as they don't add any extra context for screen reader users. Changing to alt="" will make screen readers skip those avatar images.

    Good luck with that, have fun coding! 💪

    1
    Franco A.•200
    @franco-aPosted over 3 years ago

    Hey @tediko , thanks again for the feedback! I'll be trying to create a tablet layout

    0

Please log in to post a comment

Log in with GitHub

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