Column stack: 4 wide to 2x4 to stack?

[ErgoArchitecture]

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?

Thanks!

[paul.r]

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

[ErgoArchitecture]

Worked perfectly Paul! Thanks!

[paul.r]

You’re welcome!