Sydney FP testimonials slider on mobile

Good morning,

I am using the Sydney FP Testimonials widget in page builder, and on the desk top it appears fine, but on a mobile the testimonials appear to be positioned to the left rather than in the centre of the screen. The upshot is that each testimonial shows part of the next testimonial to the right of it on the mobile.

If I turn the phone on its side and then back again, I can rectify the problem, but I’m looking for a more permenant solution so that clients don’t have to do that.

My website is http://apps-limited.co.uk/

Any help you can provide is be greatly appreciated.

Thank you very much

Kind regards

Rob

Hi,

Please try this Custom CSS and let me know how it works:

@media only screen and (max-width: 1200px) {
.roll-testimonials {
    width: 54% !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Hi Csaba,

Unfortunately this hasn’t worked. It narrowed the area of the screen which contains the testimonials, but I still have part of the next testimonial showing up, and the narrow width has increased the length of the testimonials so that now not all the text fits in the testimonial widget.

If it helps, I currently have the following CSS code in the attributes section which I found from a previous post - I use it to stop the screen moving up and down with the different lengths of testimonial:

div #panel-220-7-0-0 {
height: 200px;
@media only screen and (max-width: 479px)
{
div #panel-220-7-0-0 {
height: 750px;
}
}

Thank you Csaba

Kind regards

Rob

Hi,

This CSS have to be modified further for different screensizes, so for example:

@media only screen and (max-width: 1200px) {
.roll-testimonials {
    width: 54% !important;
}
}

@media only screen and (max-width: 1024px) {
.roll-testimonials {
    width: 65% !important;
}
}

@media only screen and (max-width: 768px) {
.roll-testimonials {
    width: 85% !important;
}
}

and so on, you may need to check different screensizes and apply different media screen with different width values to achieve the look you would like.

Best Regards,
Csaba

Hi Csaba,

So I’ve used the CSS code above and it still doesn’t work. What I don’t understand is why it works once I’ve put the phone into landscape (on its side) and then back into portrait. It works fine once I’ve done that but until I do that it looks almost like the container which the slider sits in is too big for the content of the slide, so some of the next slide appears in the container. When I use the CSS code which you originally provided, it made the container of the slider narrower, but that also made the content of the slide narrower and I had exactly the same problem with the same proportion of the next slide appearing, but now it was narrower.

Does that make sense? I could send you a screenshot of how it appears on my phone if there is somewhere I can email it to.

Thanks

Rob

Hi,

Your testimonial slider have a fixed size, but it is also set to be full width of the container, but it won’t do it automatically, so turning your device fix it, this is not there by default in the theme, just on your site I saw that where there is a fixed size set, so there you can only fix with the Custom CSS I gave you / using different media screens for every screensize to show properly when it’s loaded.

Best Regards,
Csaba

Hello there,

Try this solution: https://athemes.com/forums/topic/testimonial-slider-showing-part-of-second-testimonial-on-mobile-version/#post-682518

Let us know how it works. We’ll wait to hear back from you regarding your stats.

Regards,
Kharis

That’s done the trick, thank you very much Kharis!
Kind regards
Rob

Hi,

Great! I’m glad it’s resolved! If you need help with anything else, please open a new topic.

Have a nice day!

Best Regards,
Csaba