Column Collapse Help

Support
#1

I would like my columns to collapse based on screen size, like before it’s on mobile screen size. Currently, the content looks good on a desktop, then on my lap top, the columns look bunched. Any help is appreciated!

Thanks!

#2

Hi There,

Thank you for writing in, by default the columns collapse at screen-size 767px. To overwrite that you need to write your own @media query

@media (max-width: 1024px) { 
	/*some custom CSS here*/
}

Replace the value 1024px on what screen size you want your columns to be collapse.

I’d advice you do this with a CLASS on the section, because you might not want to collapse all your columns earlier, Just the once that is tight, right? To do this add a CLASS to your Section (e.g. my-class).

And then write your custom CSS like this:

@media (max-width: 1024px) {
	.myclass .x-column.x-sm {
		float: none;
		width: 100%;
	    margin-right: 0;
	}
}

Again replace the value 1024px on what screen size you want your columns to be collapsed.

You can place a custom CSS, on Theme Options > CSS

Hope it helps,
Cheers!