Stop testimonials slider from jumping around

That works fine for desktop devices, but how do I stop it from jumping up and down on smartphones?

Hi Yigit,

Where do i add this code as have same problem

.avia-slider-testimonials .avia-testimonial-content {
min-height: 50px;
}

Best

Nick

Thanks Yigit, worked a treat :)

Hi Guys, Any update on this one ?

Hi Yigit

I have created you a temp login

Regards

Nick

Hi Ismael. I’m having the same issue on mobile and iPad. I added the code you suggested to CSS (with my parameters of 900 pixels to cover long customer quotes)

}
@media only screen and (max-width: 990px) {
.avia-slider-testimonials .avia-testimonial-content {
min-height: 900px;
}}

@media only screen and (max-width: 480px) {
.avia-slider-testimonials .avia-testimonial-content {
min-height: 900px;
}}

but everything is still shifting up and down on iPad and phones. Am I doing it wrong?

Thanks!

Rob

Hey Vic

Tried it in both places and on the iPad the background still jump depending on the size of the quote, making the page move up and down.

Any other ideas?

Thanks!

Rob

Thanks for the great suggestions!

While I was trying the @media only quick css, I discovered a good workaround for this issue using a color section.

The testimonials slider we were trying to build was already inside a color section, so if you can’t put yours into a color section, this won’t apply to you (like if you want sidebar widgets to appear on that page, for example, although I don’t know you would if it’s mobile). In any case, if you can use a color section, put your testimonials slider inside the color section, then open the color section’s Section Layout > Section Minimum Height > Custom height in pixel.

Then you can use Ctrl+Shift+M on Firefox (to get a responsive view of your site), and mess with the ‘height in pixel’ settings of the color element until it matches your tallest testimonial slider item. Just toggle the “device selected” at the top of the viewport and it tells you the exact pixel dimensions of whatever device you’re working with. This prevents the rest of the page on mobile from jumping up and down as the slider, once the height you select is taller than the max height of how the color section with testimonials slider inside renders on the device chosen for it in Screen Options. I did end up having to remove some of the longer testimonials, though, as it was just too much variation in height on mobile, plus using the html/Text editor to make testimonials’s font sizes smaller (to reduce variation in section height) ended up causing the testimonials slider to stop rotating. (During editing, I just open up 4 or 5 tabs of the one page I’m working on and set each one to a different device view so I can edit the page in one window, then view how the changes render on the devices in the other window. PS to reload all tabs at once in Firefox, right click on a tab and click “Reload All Tabs,” or, even faster, [Windows OS] use Alt+D (selects location bar), then hold Shift and hit Tab twice (selects tab), then hit Shift+F10 (opens right-click menu from keyboard), and hit a. Anyway, that saves me tons of time clicking, etc. during edits).

The different versions of my website’s page, each for a different device, is so easy to work with once I realized I can just duplicate whatever element I’m working with (a color section, let’s say), go to Screen Options > Element Visibility, and pick which screen size I’m working with for that one. So I’ll have three or four duplicates of the same avia element, each one with settings a little different for mobile, mobile landscape / tablet portrait, tablet landscape, and full desktop so they look great on that device.

Hope this is helpful to someone. Enfold rocks!

I was able to stop the jumping testimonial slider on mobile by using this code, ajusting the figure for px until it worked.

@media only screen and (max-width: 767px) {
.avia-testimonial-wrapper {
height:500px !important;
min-height:500px !important;
}
}

Here comes my question:
I would like to get more space for the text. The arrows are taking up to much of it in the mobile version.
How can I reduce the size of the arrows, so there is more space for words? Smaller fontsize would also help.

Thanks!

Please compare the slider in desktop and in the mobile version. The german language has sometimes long words, so they are using up a whole line once there is onliy little space as in the mobile version. The link follows in private content.

Thank you, Victoria,
that was exactly what I was looking for.