Design a responsive testimonial section that adapts to different screen sizes.

Hey, I am Ajink, and today in this blog, we’re going to design a responsive testimonial section using HTML and CSS. A responsive testimonial section ensures that testimonials look great on various devices, providing an optimal user experience.

HTML Code: create index.html

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Responsive Testimonial Section</title>
  <section class="testimonial-container">
    <div class="testimonial">
      <div class="testimonial-content">
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero."</p>
        <h4>John Doe</h4>
        <span>Company ABC</span>

    <div class="testimonial">
      <div class="testimonial-content">
        <p>"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
        <h4>Jane Smith</h4>
        <span>Company XYZ</span>

    <!-- Add more testimonials as needed -->

HTML Code Explanation:

  • We have a basic HTML structure with a section containing testimonial divs, each with content, name, and company.

CSS Code: create a style.css

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;

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

.testimonial {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin: 20px;
  overflow: hidden;
  width: 300px;

.testimonial-content {
  padding: 20px;
  text-align: center;

.testimonial p {
  font-style: italic;
  color: #333;
  margin-bottom: 15px;

.testimonial h4 {
  color: #3498db;
  margin: 0;

.testimonial span {
  color: #666;

CSS Code Explanation:

  • The CSS provides styling for the testimonial section, including colors, shadows, and responsive design.
  • flex-wrap is used to allow testimonials to wrap onto the next line on smaller screens.


In this blog, we successfully designed a responsive testimonial section using HTML and CSS. Responsive design ensures that testimonials adapt to different screen sizes, providing an optimal viewing experience. Don’t forget to subscribe to my YouTube channel at for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at

Articles: 59