Docs

[CharlieMRS]

Hi I’m using X with Visual Composer as the builder.

So I have a content band with 4 columns. Below the 770px break point it collapses to the 1 column layout. I’d like to have greater control over this, like collapse it to 2 column until below 500px or something like that. The kind of options I’d have if using Bootstrap for example.

Is there a recommended method from theme authors regarding this issue?

Wordpress 4.6
X-Theme 4.6.1
Cornerstone 1.3.0

[Rupok]

Hi there,

It could be possible with some CSS but not recommended to change this globally as it’s usual feature. If you still want this for specific columns then you can add a custom class to those columns and add some CSS. You can provide your URL and point us the columns if you need our help to add the CSS. If you want to apply this globally let us know as well. Mention the screen range you want to change.

Cheers!

[CharlieMRS]

Yes thank you.

http://communitylendingofamerica.com/dev/ Currently the desktop view shows 4 horizontal columns. They collapse to a 1-column layout at too wide of a breakpoint.

I read you adapted Bootstrap, but it’s not clear to me how to use X classes to achieve this styling that Bootstrap provides.

At max-width 770px breakpoint I’d like to collapse to 2 column layout then to 1 column layout at 400px.

Thanks again!

[Friech]

Hi There,

Assign a class to each of your 1/4 columns (e.g. myclass)

And then add this on your custom CSS on Customizer.

@media (min-width: 481px) and (max-width:  770px) {
	.x-column.myclass.x-1-4 {
		width: 48%;
		margin-right: 4%;
		float: left;
	}
	.x-column.myclass.x-1-4:nth-child(2n) {margin-right: 0;}
}

Hope it helps, Cheers!

[CharlieMRS]

This works perfectly, thank you!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts