How to create responsive testimonials with CSS?
The testimonial is added to a webpage to add reviews about the product or services. It is specially added to commercial websites. The testimonials can be designed with CSS and it should be made responsive so that can be adjusted in all types of viewports.
Creating responsive testimonials
To create a testimonial, take a div element that will be used as a wrapper and add other elements like image and text within it. Use the box-shadow property to add a border to the wrapper.
Set other properties like background, border-radius, margin to it. To make it responsive use @media rules and add CSS property within. To add a <image> with rounded borders use border-radius: 50%.
To align the image and text side by side add clear:both with display:table property to the wrapper.
Example: Creating responsive testimonials
Here in the example, we created responsive testimonials. The contents of the testimonial float left for a wider screen larger than 600px and for the smaller screen, the contents are center-aligned.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.testimonial {
box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
background: #bbbbbb;
border-radius: 5px;
padding: 16px;
margin: 16px 0;
font-size: 20px;
}
/*clearning float */
.testimonial::after {
content: "";
clear: both;
display: table;
}
img {
width: 150px;
height: 150px;
float: left;
border-radius: 50%;
}
h2 {
color: blue;
font-size: 50px;
}
/* Responsive testimonial*/
@media (max-width: 600px) {
.testimonial {
text-align: center;
}
img {
margin: auto;
float: none;
display: block;
}
}
</style>
</head>
<body>
<h2> Responsive Testimonial </h2>
<div class="testimonial">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628080137-.png" alt="image">
<p> The best learning guidance you get here. User friendly environment. Practise on project. Full on industrial support. </p>
</div>
</body>
</html>
Output
For larger screen
For smaller screen
Example: Creating a responsive testimonial
In this example, we have added multiple testimonials to the page. The flex property has been used to align it side by side horizontally.
Conclusion
In this tutorial, we have created a responsive testimonial with CSS. To create a responsive testimonial use the media Query rule. We can add multiple testimonials also to the web page.
