Responsive Testimonials in Banquet theme

[jamesrosnack]

I am working in the Banquet theme and am trying to clean up the layout for tablet and mobile sizes.
the site is here: http://naidevsite1.us/

in section 14 on the home page (testimonials), you show 2 testimonials until the width is 768px, the at 767px you change the layout to display only one. I would like to change that so it changes to a single testimonial at your breakpoint of {max-width: 47.938em}

I already have the @media screen and (max-width: 47.938em) in my css for some other changes, but I am unable to find what to change for the testimonials, can you help?

[Sonnal S Sinha]

Hi,

So do you want to show 2 testimonials in mobile.

Regards,
Chris

[jamesrosnack]

no, just one

[Sonnal S Sinha]

Hi,

Can you send us the screenshot of your issues? Upload your screenshot on imgur.com and paste the share url here.

Regards,
Chris

[jamesrosnack]

The site is here:
http://naidevsite1.us/

Just scroll down the home page until you see the reservations. All I want to know is the CSS code to change the breakpoint where it changes from 2 testimonials to one because I want it to switch to one at a wider screen.

[Sonnal S Sinha]

Hi,

Okay, Kindly send us your URL of the site and WordPress admin details (Username & Password) via sktthemes.net/contact Please mention this forum URL while replying so that we understand what needs to be done.

Regards,
Chris

[jamesrosnack]

If you can tell me what the class or ID css code is, I can easily add it to my @media styles, I just dont know what the code is and dont see it in chromes webmaster tools

[Sonnal S Sinha]

Hi,

Kindly go to assets >> js >> complete.js line number 255 and 256.

Find

jQuery.noConflict();
jQuery(window).load(function(){
  jQuery('.bxslider').owlCarousel({
		loop: true,
		autoplay:false, 
		autoHeight:true,
		autoplayTimeout:3000,
		autoplayHoverPause:true,
		margin:30,
		slideBy:1,
		nav: false,
		paginationNumbers: false,
		navText:["", ""],
		dots: true,
		responsiveClass:true,
		responsive: {
		  0: { items: 1 },
		  480: { items: 1 },
		  768: { items: 2 },
		  1000: { items: 2 }
		}
  })  
});

And replace

jQuery.noConflict();
jQuery(window).load(function(){
  jQuery('.bxslider').owlCarousel({
		loop: true,
		autoplay:false, 
		autoHeight:true,
		autoplayTimeout:3000,
		autoplayHoverPause:true,
		margin:30,
		slideBy:1,
		nav: false,
		paginationNumbers: false,
		navText:["", ""],
		dots: true,
		responsiveClass:true,
		responsive: {
		  0: { items: 1 },
		  480: { items: 1 },
		  768: { items: 1 },
		  1000: { items: 1 }
		}
  })  
});

Regards,
Chris

[jamesrosnack]

ok thank you, so there is no way to change it via css? Is there a way to add this code that wont get overwritten when the theme is updated?

[Sonnal S Sinha]

Hi,

Issue resolved from our end. Kindly check and confirm.

Regards,
Chris

[jamesrosnack]

I would have kept it showing 2 at its widest browser widths (desktop) but this is better than before, thanks!

[Sonnal S Sinha]

🙂

[Author]

Posts