Sydney Pro II - Responsive design - overlapping testimonials on mobile and tablet

Sydney Pro
#1

Since updating to Sydney Pro II on our website (www.thenewforestdoghotel.co.uk), we are experiencing the following problem on tablet and mobile devices:

When a testimonial is displayed, a thin column portion of the following testimonial is also shown. This happens for each testimonial - part of the next one is displayed. This happens on mobile and table versions. For mobile - there is a horizontal scroll following the update which was not there in the previous version.

There is no issue on desktop - that’s working fine.

Thanks for any resolution.

#2

Hello there,

I am sorry for the inconvenience. To fix it, please try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      'use strict'

      var container = $('.widget_sydney_testimonials').parents('.panel-row-style');

      if( $('.widget_sydney_testimonials').length && container.hasClass('siteorigin-panels-stretch') ){
        
        $(window).on('load resize', function() {

          if ( matchMedia( 'only screen and (max-width: 980px)' ).matches ) {

            var owlItem = $('.widget_sydney_testimonials .owl-item').width();

            $('.widget_sydney_testimonials').width(owlItem).css({
              'margin-left': 'auto',
              'margin-right': 'auto'
            });
            
            $('.widget_sydney_testimonials').find('.col-md-12').css({
              'padding-left': 0,
              'padding-right': 0
            });

          }

        });  

      }

    })(jQuery);

4 . Update

If site cache applied, you’re required to clear it. Otherwise, the code addition won’t take any changes.

Regards,
Kharis

Testimonials widget shows snip of next testimonial
#3

Thanks Kharis,
I’ve done that - and checked with my host that the cache clearing is working.

I’ve installed the plugin you recommended, and added the JavaScript above. Unfortunately, it’s made things worse.

Now on the mobile version, the Testimonials page is very wide indeed. It is a bad experience for our customers. Hope you can help us get it fixed soon.

Many thanks.

#4

I’ve just checked the settings for the ‘Testimonials’ widget within my FrontPage. In the Layout options, the RowLayout is set to ‘Full Width’ rather than ‘Full Width Stretched’ - but the JScript you’ve suggested has this statement ‘siteorigin-panels-stretch’ - is that perhaps what is causing the issue?

#5

Hello there,

That code works fine to me. Do you have other special scripts? Please try disabling all other active plugins (except Sydney Toolbox and Page Builder), re-insert that code, then reload your homepage.

Regards,
Kharis

#6

Hi Kharis,
I deleted the Testimionials row and created a new one from scratch. That seems to have resolved the issue now - many thanks.

#7

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis