How to make 4 column items in a row to collapse to 3, then to 2 and then to 1 column?

Support
#1

Hi! I have rows with 4 columns on this page https://dev.griaudio.ru/members/ and I’m wondering if it’s possible to make it collapse to 3 columns at Medium screens (768px – 979px), to 2 columns at Small screens (481px – 767px) and to single column at Extra Small screens (480px & Smaller) with CSS?
Thanks!

#2

Hi There,

Thank you for writing in, please utilize the Hide Base on Screen Width feature instead. Add ROWs that will represent each breakpoints (e.g 3 columns for screens 768px – 979px and 2 columns for Small screens 481px – 767px ).

Hope it helps,
Cheers!

#3

I’ve tried this, but this makes editing existing and adding new content, like, 3 times more time consuming, and this is the type of content I want to be able to edit frequently. So, maybe there is some kind of solution? Because, for, for example 25 items in grid it’s 25/4+25/3+25/2=~29 rows to manage.
Also I’m wondering if it’s possible at least to make the grid collapse to 1 column at 480, not at 768?

#4

Hi There,

Its kind of odd if you divide 4 columns into 3, is it? I could provide you a custom CSS to do what you need, but further customization from here would fall outside of the scope of support we can offer, understand that it would ultimately be your responsibility to take it from here.

To do this, add a CLASS collapse-columns to the ROWs you want to collapse the way you need. Then add this on your custom CSS.

@media (min-width: 768px) and (max-width: 979px) {
	.collapse-columns .x-column.x-1-4 {
		width: 30.66666666666667%;
		margin-bottom: 4%;
	}
	.collapse-columns .x-column.x-1-4:nth-child(3n) {
		margin-right: 0;
	}
}

@media (min-width: 481px) and (max-width: 767px) {
	.collapse-columns .x-column.x-1-4 {
		width: 48%;
		float: left;
		margin-right: 4%;
		margin-bottom: 4%;
	}
	.collapse-columns .x-column.x-1-4:nth-child(2n) {
		margin-right: 0;
	}
}

Cheers!

#5

Yes, you are right, I haven’t thought about this. Yep, it’s kind of odd to collapse 4 into 3. Thank you very much for the code, I’ll use it to collapse columns from 4 to 2 to 1, that makes much more sense! Thanks!

#6

You’re welcome.