Team: 2 Column: CSS to have this show 2 columns on Mobile?

[jkprice7]

Hello, I’m trying to use the the Team 2 column for something on my site but I would like for the 2 columns to show up on a mobile device instead of the single stack. Can someone help. I was able to find the CSS for doing this with the Woocommerce Shop, however, I haven’t found anything for this.

Thanks for the help.

[Prasant]

Hello @jkprice7,

Thanks for asking.

You can add additional section in Cornerstone builder and then use Hide During Breakpoints feature under Section > Customize to show only on mobile devices. I have recorded a screencast that you can refer. https://screencast.com/t/FnFkelGg

Thanks.

[jkprice7]

I’m not actually wanting to hide the 2 columns. I want the 2 columns to stay 2 columns on mobiles like they are on a bigger screen.

[friech]

Hi There,

Thank you for writing in, please add a CLASS stay-inline to your Section where the 1/2 columns are placed. Then add this to Theme Options > CSS

@media (max-width: 767px) {
	.stay-inline .x-column.x-sm {
	float: left;
    width: 48%;
    margin-right: 4%;
	}
	.stay-inline .x-column.x-sm:last-child {
	margin-right: 0;
	}
}

Just keep in mind that with this kind of layout in a small device, the content may look squeeze or overflow on the column.

Hope it helps,
Cheers!