Filter with testimonials

frederic80Dec 4, 2020

Hello,

I want to create a filter with testimonials. But when I hit a filter tab, there is suddenly a large whitespace between the testimonials. How can I fix this?

<div class="section nobg notopmargin mb-2 clearfix" style="padding: 5px 0">
					<div class="container">
						<h1 class="ls0 dak mt-4 center"><b>Onze klanten aan het woord</b></h1>
						<div class="row justify-content-between align-items-center">
							<div class="col_one_fifth">  
							</div>
							<div class="col_four_fifth col_last mb-2 groter">
								<p>Iedere klant verdient bij ons een persoonlijke aanpak, een zorgvuldige voorbereiding en een vakkundige oplevering. Wij kunnen u wel vertellen wat onze diensten en onze service zijn. Maar beter is dat onze klanten het u zelf vertellen. Laat onze klanten u overtuigen.
								</p>
							</div>
							<div class="col_one_fifth">  
							</div>
							<div class="col_four_fifth col_last nobottommargin groter">
								<p class="nobottommargin">
								  <ul id="myTab2" class="portfolio-filter style-2 center einde clearfix" data-container="#portfolio">
									<li class="activeFilter"><a href="#" data-filter="*">Toon alle getuigenissen</a></li>
									<li><a href="#" data-filter=".pf-dak">Dak</a></li>
									<li><a href="#" data-filter=".pf-gevel">Gevel</a></li>
									<li><a href="#" data-filter=".pf-tuin">Tuin</a></li>
						          </ul>
								</p>
							</div>
						</div>
					</div>
				</div>
					
			
				<div class="section nobg nobottommargin notopmargin clearfix pt-1">
					<div id="portfolio">
						
						<div class="owl-carousel carousel-widget testimonial testimonial-full nobgcolor noborder noshadow nopadding divcenter tleft pf-dak clearfix" data-items="1" style="max-width: 740px">
							<div class="slide pb-5">
								<div class="testi-content">
									<p>Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text.</p>
									<div class="testi-meta mt-4">
										<i class="icon-quote-left icon-2x"></i>

										Harisson
									</div>
								</div>
							</div>
						</div>
						
						<div class="owl-carousel carousel-widget testimonial testimonial-full nobgcolor noborder noshadow nopadding divcenter tleft pf-tuin clearfix" data-items="1" style="max-width: 740px">
							<div class="slide pb-5">
								<div class="testi-content">
									<p>Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text.</p>
									<div class="testi-meta mt-4">
										<i class="icon-quote-left icon-2x"></i>

										Piet
									</div>
								</div>
							</div>
						</div>	
						
						<div class="owl-carousel carousel-widget testimonial testimonial-full nobgcolor noborder noshadow nopadding divcenter tleft pf-dak clearfix" data-items="1" style="max-width: 740px">
							<div class="slide pb-5">
								<div class="testi-content">
									<p>Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text.</p>
									<div class="testi-meta mt-4">
										<i class="icon-quote-left icon-2x"></i>

										Joeri
									</div>
								</div>
							</div>
						</div>	
						
						<div class="owl-carousel carousel-widget testimonial testimonial-full nobgcolor noborder noshadow nopadding divcenter tleft pf-dak clearfix" data-items="1" style="max-width: 740px">
							<div class="slide pb-5">
								<div class="testi-content">
									<p>Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text.</p>
									<div class="testi-meta mt-4">
										<i class="icon-quote-left icon-2x"></i>

										Tom 
									</div>
								</div>
							</div>
						</div>	
						
						<div class="owl-carousel carousel-widget testimonial testimonial-full nobgcolor noborder noshadow nopadding divcenter tleft pf-dak clearfix" data-items="1" style="max-width: 740px">
							<div class="slide pb-5">
								<div class="testi-content">
									<p>Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text. Lorem ipsum testimonial text.</p>
									<div class="testi-meta mt-4">
										<i class="icon-quote-left icon-2x"></i>

										Jean
									</div>
								</div>
							</div>
						</div>	
						
						
					</div>
			      </div>

SemiColonWebSTAFFDec 4, 2020

Hello,

We have tried checking your Page but unfortunately, it is not loading properly for us! But by looking at your codes, there appear to be some unnecessary codes. Firstly, do not use the Testimonials as a Carousel. This can lead to unnecessary and unexpected issues. Simply use the Single Testimonials Shortcode:

<div class="testimonial">
	<div class="testi-image">
		<a href="#"><img src="images/testimonials/8.jpg" alt="Customer Testimonails"></a>
	</div>
	<div class="testi-content">
		<p>Porro dolorem saepe reiciendis nihil minus neque. Ducimus rem necessitatibus repellat laborum nemo quod.</p>
		<div class="testi-meta">
			Cyan Ta'eed
			<span>Tutsplus</span>
		</div>
	</div>
</div>

Recreate your Testimonials using the code above from scratch and this should fix the issue with the Filter.

Also, there are Mixed Content Errors (Browser’s Developer Console) on your Page. Make sure that all the http:// Links on your Page is replaced with https://.

We highly recommend you to update to the Latest Version of Canvas as Support is only limited to Included Features but not Bug Fixes and Functionality Enhancements in the Older Versions.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.