Skip to content
Submitted 6 months ago

Testimonial Grid Section with HTML, CSS Grid

Matthew•200
@MattJM1007
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

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

Getting the formatting write with grid and applying the css reset to make adding padding and margins easier.

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

The fonts and spacing didn't quite match up with the design file, so made some adjustments on my own to better match the design.

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

Can someone help me make this responsive? I noticed the grid was not being responsive and I could not get the media query to work with grid as well. How can I do this?

Community feedback

  • Dustin Knie•210
    @nullpuppyPosted 6 months ago

    Looks good! Very clean!

    A few things that can help with overall layout and centering:

    body {
  display: flex;
  flex-direction: column;
  align-items: center; /* center content in column horizontal */
  justify-content: center; /* center content in column vertically */
  margin: auto;
}

    For the responsive bit, don't use fixed widths (you're grid is repeat(cnt, size). Use something like 1fr in place of your size instead, which will tell the browser to evenly divide each column into 1/4th of the available space). And then maybe add a max-width to your wrapper (main in your case). You can also likely reduce your rows to 2, unless you have a specific reason for wanting that many.

    Then in your media queries, you'll want to redefine (or remove, depending) the grid/row setting for each card.

    Hope that helps!

    Marked as helpful
    0
    Matthew•200
    @MattJM1007Posted 5 months ago

    @nullpuppy thank you so much for the feedback! I was able to apply it and make the site responsive. I've done this before in other projects but just didn't have the bandwidth to think of it yesterday lol. Appreciate the help!

    1

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