How Can We Help?

Search for answers or browse our knowledge base.

< All Topics
Print

Change number of columns on the testimonials archive page

By default, there are 3 columns for the archive page testimonials grid. If you want to make changes to the column structure, it can be done using CSS. Copy the CSS for your required column set and paste it to Divi Theme Options Custom CSS area.

Change testimonials columns to 2

@media screen and (min-width: 981px) {
	.single-testimonial-grid:not(:nth-child(2n)) {
		margin-right: 3%;
	}
	
	.single-testimonial-grid:not(:nth-child(3n)) {
    	margin-right: 0;
	}
	.single-testimonial-grid {
		width: 48.5%;
	}
}

Change testimonials columns to 4

@media screen and (min-width: 981px) {
	.single-testimonial-grid:not(:nth-child(4n)) {
		margin-right: 3% !important;
	}
	
	.single-testimonial-grid:not(:nth-child(3n)) {
    	margin-right: 0;
	}
	.single-testimonial-grid {
		width: 22.75%;
	}
}

Change testimonials columns to 5

@media screen and (min-width: 981px) {
	.single-testimonial-grid:not(:nth-child(5n)) {
		margin-right: 3% !important;
	}
	
	.single-testimonial-grid:not(:nth-child(3n)) {
    	margin-right: 0;
	}
	
	.single-testimonial-grid {
		width: 17.6%;
	}
}

Change testimonials columns to 6

@media screen and (min-width: 981px) {
	.single-testimonial-grid:not(:nth-child(6n)) {
		margin-right: 3% !important;
	}
	
	.single-testimonial-grid:not(:nth-child(3n)) {
    	margin-right: 0;
	}
	
	.single-testimonial-grid {
		width: 14.6667%;
	}
}

Table of Contents