Display in 2 columns rather than 1

Magazine testimonials! That looks really nice. And it gives me a lot of ideas for new layouts and effects.

Challenge accepted! However, to maintain readability as we work down to the smallest screen, at some point 3 columns will have to give way to 2 columns which will have to give way to 1 column. Would you agree?

HAHAHAHA!!!

Yep, sounds perfect! I would definitely agree with that!

Glad there are some more ideas floating around now, should enhance it nicely!

Using the Responsive Theme (cyberchimps) I could add the included grid css to allow the columns and the columns I believe would have dropped below each other as the media screen got smaller.

When I was using 2011 I think, there was a plugin that did columns/grids. Something else to look at.

Design is not my strong suit and I definitely have a ton to learn about responsive so if someone more skilled wants to help, please jump in!

If using CSS columns, here is a quick-n-simple approach that solves the immediate problem of squished columns.

/* Responsive */
@media only screen and (min-width: 768px) {
	/* tablets and desktop */
	#testimonials_container {
		-moz-column-count: 3;
		-moz-column-gap: 0px;
		-webkit-column-count: 3;
		-webkit-column-gap: 0px;
		column-count: 3;
		column-gap: 0px;
	}
}

@media only screen and (max-width: 767px) {
	/* phones */
	#testimonials_container {
		-moz-column-count: 2;
		-moz-column-gap: 0px;
		-webkit-column-count: 2;
		-webkit-column-gap: 0px;
		column-count: 2;
		column-gap: 0px;
	}
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
	/* portrait phones */
	#testimonials_container {
		-moz-column-count: 1;
		-moz-column-gap: 0px;
		-webkit-column-count: 1;
		-webkit-column-gap: 0px;
		column-count: 1;
		column-gap: 0px;
	}
}

This snippet from CSS Tricks provides some deeper coverage but I agree with this layout-focused approach.

I may work this into the tutorial at some point but I’m actually working on a fork of GCT at the moment and I would rather build this capability into my version.

Hey Chris,

Wonderful, thank you for that.

I found that it was still displaying 3 columns on iPad, not dropping to 2 (portrait, landscape still shows 3 which is fine as the screen width is big enough), so decided to tweak a little to make it work 2 columns in portrait, and also a tweak for iPhone.

/* Responsive */
@media only screen and (min-width: 769px {
	/* tablets and desktop */
	#testimonials_container {
		-moz-column-count: 3;
		-moz-column-gap: 0px;
		-webkit-column-count: 3;
		-webkit-column-gap: 0px;
		column-count: 3;
		column-gap: 0px;
	}
}

@media only screen and (max-width: 768px) {
	/* phones */
	#testimonials_container {
		-moz-column-count: 2;
		-moz-column-gap: 0px;
		-webkit-column-count: 2;
		-webkit-column-gap: 0px;
		column-count: 2;
		column-gap: 0px;
	}
}

@media only screen and (max-width: 640px) and (orientation: portrait) {
	/* portrait phones */
	#testimonials_container {
		-moz-column-count: 1;
		-moz-column-gap: 0px;
		-webkit-column-count: 1;
		-webkit-column-gap: 0px;
		column-count: 1;
		column-gap: 0px;
	}
}

#testimonials_container .result {
	display: inline-block;
}

Hope you don’t mind me posting!

Of course I don’t mind, it’s your thread after all!