Testimonial Sections

Testimonial

Each of our templates come with five purpose-built testimonial sections that are defined by the class .testimonial-X, where X represents the testimonial section type (1-5) as shown below.

Example

...

CSS For Retina Displays

For testimonial sections that have a background image we serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.

								
									.testimonial-X{
										background-image:url(../images/slider/testimonial-bkg-image.jpg);
									}

									@media
									only screen and (-webkit-min-device-pixel-ratio: 2),
									only screen and (		min--moz-device-pixel-ratio: 2),
									only screen and (			-o-min-device-pixel-ratio: 2/1),
									only screen and (				min-device-pixel-ratio: 2),
									only screen and (					min-resolution: 192dpi),
									only screen and (						min-resolution: 2dppx) { 
											.testimonial-X{
												background-image:url(../images/slider/[email protected]);
											}
									}

Testimonial Section One

A single testimonial section. Target .testimonial-1 to set background color or image. Alternatively, for background use Timber background color classes.

Example

Testimonial Section Two

A single, modern looking testimonial section. Target the .testimonial-2 class to set background color or image. Alternatively, for background use Timber background color classes.

Example

								
									
										
											
												
													Customer Testimonial
													Valley Park. Palo Alto, CA.
												
											
											
												
													
													Quote...
														John Doe

Testimonial Section Three

This testimonial section employs the Timber content grid which means you can alternate the number of testimonials per row by changing the .content-grid-X class, where X represents the number of columns (2-6).

Example

Testimonial Section Four

Like testimonial section three, this testimonial section employs the Timber content grid which means you can alternate the number of testimonials per row by changing the .content-grid-X class, where X represents the number of columns (2-6). This section also employs the equalize plug-in for matching testimonial heights on a per row basis, making sure testimonial boxes look nice an even.

Example

Testimonial Section Five

An elegant, full width testimonial slider. Testimonial slider settings can be found on line 299-312 of js/template-functions.js.

Example