Way to change horizontal or vertical tiling for regions?

joey

I am working on a project where I want to have 7-9 modules stacked either horizontally or vertically.

By default, modules stack vertically. So, if you have three “weather” modules for London, New York, and Toronto, they will look like this:
London Weather
New York Weather
Toronto Weather

This would make sense on a vertical/portrait screen, where stacked makes sense. However, if you have a horizontal/landscape screen, you might run out of space, and it might look weird. Having them side by side might make more sense, like this:
London Weather | New York Weather | Toronto Weather

I spent a non-trivial amount of time trying to override the main.css file’s “flex-drection” settings using the custom.css, but I was unable to do so. I ended up breaking the cardinal rule and modified a file that could be overwritten by future updates.

Would it be possible to have somewhere that could be changed in the config.js? Or, is there an easy way to override using custom.css that I was just too brain-fogged to see?

Thank you.

joey

@sdetweil That does work. Looking back, I did try that, but I wonder if maybe I had a typo in the region name or something.

Makes things side-by-side as you say (for my usage with upper_third region):

.region.upper.third  .container {
  flex-direction: row;
}

Thanks, as always, for all the hard work and all the kind help!

sdetweil

@joey I did this before in css, I’ll have to look for it later,
But basically change the direction from column to row

Original

.region .container {
  display: flex;
  flex-direction: column;
}

Override in custom.css

.region.top.left  .container {
  flex-direction: row;
}

Then put all those in the top-left position

joey

@sdetweil That does work. Looking back, I did try that, but I wonder if maybe I had a typo in the region name or something.

Makes things side-by-side as you say (for my usage with upper_third region):

.region.upper.third  .container {
  flex-direction: row;
}

Thanks, as always, for all the hard work and all the kind help!