How to Create Responsive Testimonials with CSS?

Last Updated : 05 Aug, 2024

Testimonials are a powerful way to build trust and credibility for your brand. They showcase the positive feedback and experiences of your clients or users. To ensure your testimonials look great on all devices, it’s essential to make them responsive. Here, we’ll explore different approaches to creating responsive testimonials with CSS.

These are the following approaches to create responsive testimonials with CSS:

Table of Content

Using Flexbox Layout
Using Grid Layout
Responsive Design with Media Queries

Using Flexbox Layout

Flexbox is designed for one-dimensional layouts. It aligns items along a single axis (either row or column) and is excellent for distributing space and aligning items dynamically. That's why we are using this to create the responsive Testimonials.

Example: This example shows the use of flexbox to create the responsive testimonials.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Responsive Testimonials with Flexbox</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <section class="container">
        <div class="testimonial">
            <img src="client1.jpg" alt="Client 1">
            <blockquote>
                <p>"Excellent service, highly recommend!"</p>
                <footer>- John Doe, CEO</footer>
            </blockquote>
        </div>
        <div class="testimonial">
            <img src="client2.jpg" alt="Client 2">
            <blockquote>
                <p>"A fantastic experience from start to finish."</p>
                <footer>- Jane Smith, Marketing Director</footer>
            </blockquote>
        </div>
    </section>
</body>

</html>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.testimonial {
    flex: 1 1 300px;
    margin: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Output:

Recording-2024-08-05-084028 — Flexbox Layout

Using Grid Layout

CSS Grid Layout is designed for two-dimensional layouts, meaning it can handle both rows and columns simultaneously. It's ideal for more complex designs. That's why we are using this to create the responsive Testimonials.

Example: This example shows the use of grid o create the responsive testimonials.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Grid Testimonials</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <section class="container">
        <div class="testimonial">
            <img src="client1.jpg" alt="Client 1">
            <blockquote>
                <p>"Outstanding support!"</p>
                <footer>- John Doe</footer>
            </blockquote>
        </div>
        <div class="testimonial">
            <img src="client2.jpg" alt="Client 2">
            <blockquote>
                <p>"Impressive results!"</p>
                <footer>- Jane Smith</footer>
            </blockquote>
        </div>
    </section>
</body>

</html>

CSS

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
}

.testimonial {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.testimonial img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

Output:

Recording-2024-08-05-085023 — Grid Layout Example

Responsive Design with Media Queries

Media queries apply different styles based on the screen size or device characteristics. They are used to make design adjustments to suit various devices. That's why we are using this to create the responsive Testimonials. as it will allow us to resize the template.

Example: This example shows the use of media queries to create the responsive testimonials.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Responsive Testimonials</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <section class="testimonials">
        <div class="testimonial">
            <img src="client1.jpg" alt="Client 1">
            <blockquote>
                <p>"Great experience!"</p>
                <footer>- John Doe</footer>
            </blockquote>
        </div>
        <div class="testimonial">
            <img src="client2.jpg" alt="Client 2">
            <blockquote>
                <p>"Highly professional!"</p>
                <footer>- Jane Smith</footer>
            </blockquote>
        </div>
    </section>
</body>

</html>

CSS

.testimonials {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.testimonial {
    flex: 1 1 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.testimonial img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .testimonial {
        padding: 15px;
    }

    .testimonial img {
        width: 60px;
        height: 60px;
    }
}

Output:

Recording-2024-08-05-085347 — Media Queries Output

Conclusion

Creating responsive testimonials ensures that your feedback section looks great on all devices, enhancing user experience and credibility. By using Flexbox, Grid Layout, or Media Queries, you can achieve a responsive design that adapts to different screen sizes.

What is an API call?

tanmoymishra

Improve

Article Tags :

How to Create Responsive Testimonials with CSS?

Using Flexbox Layout

Using Grid Layout

Responsive Design with Media Queries

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?