Split row into custom columns

[Ede]

Trying to split a row into custom columns, but it doesnt seem to work as I want:

1/6 (2/12) + 1/3 (4/12) + 1/4 (3/12) + 1/4 (3/12) = 1 (12/12)

Hows that possible ?

[thai]

Hi There,

The row doesn’t support the column layout like that.

You can only use this: 1/6 + 2/6 + 2/6 + 1/6

Regards!

[Ede]

Thanks, but what do you mean ‘like that’ ?

this is possible 1/6 + 1/3 + 1/2 so why not above ?
How can I achieve it anyway ?

[paul.r]

Hi,

It needs a common denominator and it should add up to 1 to work correctly.

You can check possible combination on the link below

http://demo.theme.co/integrity-1/shortcodes/columns/

If you want a custom column width, you may do so by adding a width in elements css.

For example, you can add this code.

$el {
    width:12.5% !important;
}

Just make sure that all the column’s width including the margins will be equal to 100%

Thanks

[Ede]

@Ede

1/6 + 1/3 + 1/2

Thanks for the answer, eventhough this adds up to 1 yet doesnt have a common denominator but still works: 1/6 + 1/3 + 1/2 Will go CSS. As this and aboves example work perfectly in bootsrap, and it’s just an abstraction of it, it’s very confusing imo.

[rad]

Glad it works and thanks for sharing!

[Ede]

well, it doesnt entirely, hence the post and having to go css

[christian]

Hi Hei,

There are 2 conditions that needs to be met to activate Cornerstone’s (Pro Content Builder’s) column setup.

1. The total column width + column gaps is close to 100%
2. The denominators in the setup must be divisible to the largest denominator in the setup.

This setup (1/6 + 1/3 + 1/2) works because 1/6 has a width of 13.33332%, 1/3 - 30.66666%, and 1/2 - 48%. Add all that up, you have 91.99997%. You have a column gap or right margin of 4% for all columns except the last one so add that up to the column width and the whole structure spans 99.99998 which is almost 100%.

Denominators 3 and 2 are also divisible by the largest denominator 6.

Speaking of Bootstrap, it works in Bootstrap because you can add classes directly to the HTML while the builder has some restrictions to prevent users from breaking the layout.

There will be more layout possibilities in the future. Watch out for the V2 Grid Cycle mentioned in our latest Status Update: https://theme.co/apex/forum/t/status-report-december-4-2018/48648

Hope I haven’t missed a thing.

[Ede]

Thanks for the clear answer!

[rad]

You’re most welcome!