Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 29, 2024 at 1:52 pm #1468050
    the_digital_manager

    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;
}
    October 4, 2024 at 5:55 pm #1468445
    Mike

    Hey Peter,
    Thanks for your patience, I didn’t see this thread. To show the arrows try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .avia-fullscreen-slider .avia-slideshow-controls a, 
#top .avia-fullscreen-slider .av-control-minimal .avia-slideshow-controls a {
    opacity: 1;
}

    For your other question try this css and adjust to suit if it is not exact:

    #top .avia-slideshow-dots a {
	margin: 0 14%;
}

    Best regards,
    Mike

    October 10, 2024 at 8:19 am #1468774
    the_digital_manager

    Hi Mike, thanks for your response, but that’s not exactly what I mean.
    this is the current situation
    current

    but i’ld like it to use the space more, like (not 100%, but you get the idea)
    desired

    October 10, 2024 at 5:22 pm #1468841
    Mike

    Hi,
    Thanks for the screenshots, but I didn’t find a link to this page, please link to the page so we can assist.

    Best regards,
    Mike

    October 19, 2024 at 1:42 pm #1469435
    the_digital_manager

    Hi Mike, it’s for the site you helped with already quite a bit:)
    https://fysiobreda.thedigitalmanager.nl/
    the element is used on the homepage.

    October 19, 2024 at 5:01 pm #1469453
    Mike

    Hi,
    If you want the arrows to the side of the image, the image can not be the same size of the content:

    @media only screen and (max-width: 767px) {
    .responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
        padding: 0;
    }
    .avia-testimonial-meta-mini {
    width: 100%;
    }
    #top .avia-slideshow-arrows a {
    	margin: 0;
    }
    .avia-slideshow-arrows a.prev-slide {
    	left: -7%;
    }
    .avia-slideshow-arrows a.next-slide {
    	right: -7% !important;
    }
}

    this is the result:
    Screen Shot 2024 10 19 at 11.00.31 AM

    Best regards,
    Mike

    November 22, 2024 at 3:27 pm #1471939
    the_digital_manager

    @mike works like a charm. thanks
    how can i put the arrows on the exact middle of the image?
    and perhaps make them a bit bigger and give them this colour: #CC4055

    November 23, 2024 at 5:39 pm #1472022
    Mike

    Hi,
    Thank you for your patience, I adjusted, please check.
    Screen Shot 2024 11 23 at 11.38.10 AM

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.