Let's start to think about how we can introduce Column percentage width settings into mobile.

1. Should we add similar options to the placeholder?

2. Vertically stacked state:

On web, all the columns appear as equal width in this state, so I guess we can do the same. But I am open to suggestions.

3. Horizontally stacked state:

This is the real challenging part. On web, columns are displayed in a single row, so there's a straight forward calculation for the column width there: containerWidth/columnCount. On mobile it is different, we first decide how many column we want to display on a single row. And then we calculate the column width accordingly. So I have 2 options in my mind to adapt "Column percentage width" into this:

A. Keep the current Column width calculation but add a multiplication factor to it.

Let's say we have:

4 columns with equal percentages
Container width is 600 in landscape mode

So, 1 Column width equals to 300.(because we have 2 columns per row no matter what the total column count is)

But, let's say we updated percentage widths as:

1st Column -> 10%
2nd Column -> 40%
3rd Column -> 25%
4th Column -> 25%

Then how do we adjust the widths?

Each Column width = 300*percentageFactor

percentageFactor = percentageWidth/(1/columnCount)

And the widths for each column will be equal to:

1st Column width = 300*(0.1/(1/4))= 120
2nd Column width = 300*(0.4/(1/4))= 480
3rd Column width = 300*(0.25/(1/4)) = 300
4th Column width = 300*(0.25/(1/4)) = 300

B. Don't do anything visual in the editor if columns width change

I think option A is worth investigating.

Any thoughts? @iamthomasbishop @dratwas @lukewalczak