Tagged: testimonial
Good day. Using either your Content Slider widget or your Testimonial widget, is there a way to make it look like the testimonial slider as seen in the website URL I provided in the private content field? It would be a colored box (white in this case) with rounded corners and large size text. With or without the photo to the left.
Thank you!
Hey santanin,
Thank you for the inquiry.
There’s no built-in option for this, but you can use the following css code to apply a white background to the testimonial container and set a border radius of 30px. To adjust the content color of the testimonial item, go to the Styling > Colors section.
#top .avia-slider-testimonials.avia-testimonial-wrapper .avia-testimonial .avia-testimonial_inner {
background: #ffffff;
border-radius: 30px;
padding: 20px;
}
Best regards,
Ismael
Thank you, @Ismael! That worked perfect on desktop view. However, on mobile, the Testimonials white box is squished so only 1 or 2 words fit on each line, and there’s lots of black space to the left and right. Is there CSS to increase the width of the Testimonials box so more words fit on one line? URL to my staging website is in the private section. Please view it on a mobile device. Thank you!
Hi,
Thank you for the update.
Try to add the following css code below the first one to adjust the padding around the testimonial container and decrease the font size on smaller screens.
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0;
}
.responsive #top .avia-slider-testimonials .avia-testimonial-content p:last-child {
font-size: 0.85em;
line-height: 1.6em;
}
}
Best regards,
Ismael