The wonders of desktop column stacking

Many of us have an "a-haa" moment when working with the Mono Editor, when things fall into place. Quite often it comes when using the "desktop column stacking" option on rows. Let me explain why.

What is desktop column stacking?

Well, that's not the easiest question to answer in simple terms, or without some demonstration.

If you're familiar with HTML and CSS code, and know a bit about how the box-model behaves, then it's a good start to say that when you turn this feature on, it allows columns to behave in a way as if they were "floated".

To anybody who doesn't understand that, however you will have to persevere with me while I explain.

Rows contain columns

Right now, you will likely be aware that our rows can contain up to 12 columns - we work to a 12-column grid, so really the most columns you can have in a row is 12, if they're all 1 grid-line in size.

Normally you can't have multiple columns and then make them span more than the width of one row.

Except if "desktop column stacking" is on.

With this option turned on (on the Row settings box) you can stack columns on top of one another in the desktop view. (hence "desktop column stacking")

So here's an example:

I have a row with 4 equal width columns. Each containing some text.

I would like to add a title above these columns, but I don't want to have to add another row above them - I'm using a background image on the row, and I need the title in the same row if possible.

When I drag a text module in, it won't allow me to drag it into the space above the 4 columns (but still within the row). How annoying!

Fear not, this is where "desktop column stacking" comes into play. I can go to the row settings and turn it on.

Then I can split the first column, and drag it to 100% of the width of the column.

This then pushes the other columns down underneath, and I just need to adjust the width of the one I split, so they're equal again.

Now I have a space I can add my text module to, and put in my title.

Have a look at the video below, to see this in action.

Hopefully it provides you with an "a-haa" moment of your own!

0 0