Rounded color box in content slider widget or testimonial widget

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

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;
  }
}

(moved screenshot in the private field)

Best regards,
Ismael

Hi!

Thanks for following up.

We have moved the screenshot to the private field. To adjust the display of the navigation arrows and move them to the top of the testimonials, try to include this css code:

#top .avia-slider-testimonials.avia-testimonial-wrapper {
    overflow: visible;
}

#top .avia-slider-testimonials.av-slideshow-ui.av-nav-arrows-visible .avia-slideshow-arrows a {
    margin: -64px 15px 0;
}

Please make sure to clear the browser cache or history on your phone, or switch to incognito mode temporarily to see the latest changes.

Regards,
Ismael