How to create: Customer reviews

Learn how to use CSS to create responsive customer reviews.

Customer reviews are usually used to let people know what others think of you or your product.

Avatar

Chris Fox. CEO at Mighty Schools.

John Doe saved us from a web disaster.

Avatar

Rebecca Flex. CEO at Company.

No one is better than John Doe.

Avatar

Julia Roberts. Actor.

Simply love Johnny Boy.

Try It Yourself

How to set the style for customer reviews

Step 1 - Add HTML:

<div class="container">
  <img src="bandmember.jpg" alt="Avatar" style="width:90px">
  <p><span>Chris Fox.</span> CEO at Mighty Schools.</p>
  <p>Bill Gates saved us from a web disaster.</p>
</div>
<div class="container">
  <img src="avatar_g2.jpg" alt="Avatar" style="width:90px">
  <p><span>Rebecca Flex.</span> CEO at Company.</p>
  <p>No one is better than Bill Gates.</p>
</div>

Step 2 - Add CSS:

/* Set the container style with rounded borders, grey background, and some inner and outer margins */
.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
/* Clear the float after the container */
.container::after {
  content: "";
  clear: both;
  display: table;
}
/* Float the image inside the container to the left. Add right margin and set the image style to circular */
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
/* Increase the font size of the span element */
.container span {
  font-size: 20px;
  margin-right: 15px;
}
/* Add media query to implement responsive layout. This will center the text and images inside the container */
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

Try It Yourself