Building a responsive testimonial grid with HTML and CSS

Testimonials are an essential part of any business or service website as they help build trust and credibility with potential customers. A testimonial grid is a great way to showcase customer feedback in an organized and visually appealing manner. In this blog post, we will guide you through the process of building a responsive testimonial grid using HTML and CSS.

Step 1: Create the HTML Markup

The first step is to create the HTML markup for the testimonial grid. We will use the following structure:

<div class="testimonial-grid">
  <div class="testimonial">
    <div class="testimonial-image">
      <img src="image-1.jpg" alt="Testimonial Image">
    </div>
    <div class="testimonial-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at velit maximus, molestie est a, tempor magna.</p>
      <h4>John Doe</h4>
      <span>CEO, XYZ Company</span>
    </div>
  </div>
  <div class="testimonial">
    <div class="testimonial-image">
      <img src="image-2.jpg" alt="Testimonial Image">
    </div>
    <div class="testimonial-text">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at velit maximus, molestie est a, tempor magna.</p>
      <h4>Jane Doe</h4>
      <span>Founder, ABC Company</span>
    </div>
  </div>
  <!-- Add more testimonials as needed -->
</div>

In the above code, we have created a div with a class of testimonial-grid, which will act as a container for our testimonial grid. Inside this container, we have added div elements with a class of testimonial to represent each testimonial. Each testimonial has two child div elements - testimonial-image and testimonial-text.

Step 2: Style the Testimonial Grid with CSS

The next step is to style the testimonial grid with CSS. We will use flexbox to create a responsive grid that will adjust to different screen sizes. Here's the CSS code:

.testimonial-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.testimonial {
  width: calc(33.33% - 20px);
  margin-bottom: 40px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.testimonial-image {
  height: 100px;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}

.testimonial-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.testimonial-text {
  padding: 20px;
}

.testimonial-text p {
  margin-bottom: 10px;
}

.testimonial-text h4 {
  margin-bottom: 5px;
}

.testimonial-text span {
  font-size: 14px;
  color: #999;
}

In the above code, we have styled the testimonial-grid container with flexbox to create a responsive grid. The justify-content: space-between property ensures that the testimonials are evenly spaced out on the horizontal axis.

We have also styled the testimonial class to give it a width of 33.33% minus 20px (to account for the margin), a white background, and a box shadow to make it stand out from the background.

The testimonial-image class has a fixed height of 100px and an overflow property set to hidden, which ensures that the image is cropped to the desired height. We have also added a border radius property to give the image a rounded corner effect.

The testimonial-image img class ensures that the image inside the testimonial-image div is displayed at full width and with a height of auto, while object-fit: cover ensures that the image is scaled to cover the full area of the container without losing its aspect ratio.

The testimonial-text class sets a padding of 20px to the testimonial text container, and the p, h4, and span elements inside are styled with appropriate margin and font sizes to make the text easy to read.

Step 3: Make the Testimonial Grid Responsive

The final step is to make the testimonial grid responsive. We can do this by adding media queries that adjust the width of the testimonial elements as the screen size changes. Here's the CSS code:

@media screen and (max-width: 768px) {
  .testimonial {
    width: calc(50% - 20px);
  }
}

@media screen and (max-width: 480px) {
  .testimonial {
    width: 100%;
  }
}

In the above code, we have added two media queries that adjust the width of the testimonial element as the screen size changes. On screens that are less than or equal to 768px wide, the width of the testimonial element is set to 50% minus 20px, allowing two testimonials to fit on the same row. On screens that are less than or equal to 480px wide, the width of the testimonial element is set to 100%, allowing one testimonial to take up the full width of the container.

And that's it! With just a few lines of HTML and CSS code, we have created a responsive testimonial grid that looks great on all screen sizes. You can customize the styling and add more testimonials as needed to make it work for your specific use case.

In summary, building a responsive testimonial grid with HTML and CSS involves creating a container element and adding testimonial elements inside. Each testimonial element contains an image, a testimonial text container, and appropriate styling to make it look good on all screen sizes. Finally, media queries are used to adjust the width of the testimonial elements as the screen size changes, ensuring that the testimonial grid remains responsive.

Testimonials are a great way to showcase your brand's credibility and build trust with potential customers. By creating a responsive testimonial grid with HTML and CSS, you can ensure that your testimonials are displayed in an attractive and user-friendly way, no matter what device your website visitors are using.