Column stack: 4 wide to 2x4 to stack?

I have a row of icons that are 4 columns wide on desktop, but I want them to stack 2x2 before reducing to a single column on cell phones.

I found this topic, and tried to implement it here, but could not get it to work.

Next I tried this article, which you can see my attempt at here. Still no good.

Finally I tried this article, which didn’t actually seem to apply at all due to technique.

I think the second method above is probably close. What am I missing?


Hi @ErgoArchitecture,

For the second method, Please change your css code to this.

@media (min-width: 481px) and (max-width: 767px) {
	body .x-section .x-container.marginless-columns.break-in-two .x-column.x-sm {
		float: left;
	    width: 48% !important;
	    margin-right: 4% !important;
	    margin-bottom: 4% !important;
	body .x-section .x-container.marginless-columns.break-in-two .x-column:nth-child(2n) {
		margin-right: 0 !important;

Hope this helps

Worked perfectly Paul! Thanks!

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.