Force xs columns

[skndal]

I’ve been struggling with this and haven’t found a satisfactory or recent answer in the forums:

Though it does not occur often, sometimes it is desirable to force column widths on the smallest screen sizes. Currently, X/Cornerstone automatically labels all columns with the x-sm class, so any screen sizes below it will automatically default to 100% width.

Right now I have a row of 6x 1/6th columns. I want to force these to remain 1/6th on mobile phone-screens. In the html, each column should state x-column x-xs x-1-6 (rather that x-sm), however, I can’t for the life of me find where to configure this.

Adding a class does not solve it, because when both x-sm and x-xs are present the columns will deteriorate according to the former. I want 1/6th width on xs-screens. Hiding does not help, because if I make another row with the same widths, it will also default to 100% width columns on xs-screens.

Your help is appreciated! Thanks!

[friech]

Hi There,

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

@media (max-width: 767px) {
	.stay-inline .x-column.x-sm {
	float: left;
    width: 13.33332%;
    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 will look squeeze, worst your content will be overflow from its column.

Hope it helps,
Cheers!