Add dotted navigation to testimonial block | re-open old case

Hi @mike,

I’d like to ask a follow up question about this old topic
I use a custom testimonial function on mobile on this site https://schoonheidsinstituutdiane.nl/

I want to re-use this for another website, but I’d like to decrease the margins on the side, to fit a maximum of content on mobile, whilst ensuring that the arrows left and rights are still visible. Currently the testimonial is quite narrow/i don’t use the available space in a good way.
Is it possible to make the arrows overlap the image, so that the image is the same width as all the content of the site, with the text the same width as everything else as well? ?
what do I change in the CSS to achieve this? Below CSS is currently in use

/*Custom Testimonial blocks */
#top #team .avia-slider-testimonials.avia-testimonial-wrapper {
	overflow: visible;
}
.responsive #top .avia-slideshow-dots.avia-slideshow-controls a {
  opacity: 1;
}
.avia-slideshow-dots a.goto-slide.active {
    background: #bf9f97;
}
.avia-slideshow-dots a.goto-slide {
    background: #ffffff;
}

.avia-slideshow-dots {
    bottom: -30px;
padding-bottom: 20px;
}

@media only screen and (max-width: 767px) { 
.responsive #top #team .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0;
    font-size: 0.85em;
    display: flex;
    justify-content: center;
}
}

@media only screen and (max-width: 767px) { 
#top #team .av-large-testimonial-slider .avia-slideshow-arrows a {
    top: 88px;
}
}

@media only screen and (max-width: 450px) { 
	#top .avia-testimonial-content {
    width: 100%;
	}
	#top #main .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
    opacity: 1;
    top: 12%;
	}
}

@media only screen and (max-width: 767px) {
.myslider {
margin-top: 25px;
margin-bottom: 0.5px;
}
}

.avia-testimonial-meta-mini {
width: 200px;
height: auto;
margin-top: -30px;
justify-content: center;
}
.avia-testimonial-name {
font-weight: 600 !important;
font-size: 23px !important;
}

.avia-testimonial-subtitle {
line-height: 25px;
}

.reviews-italic {
  font-style: italic;
}

• This topic was modified 4 hours, 36 minutes ago by the_digital_manager.
• This topic was modified 4 hours, 25 minutes ago by the_digital_manager.