Easy Center Resizing?

[sdetweil]

@amarand sadly there is no ‘easy’ way

the default section/position/regions layout is like this
https://forum.magicmirror.builders/topic/286/regions?_=1683231109633

no two authors do styling the same way. every thing u tweak makes trouble somewhere else…

using the developers console is one good tool, but its all still hard work.
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1683231109642

[sdetweil]

@amarand ps. I’ve been here since 2017, and do a lot of css, and modules… but I couldn’t tell you how to do it, cause I can’t myself.

[BKeyport]

@amarand I’d do it like this:

.region.right {
	min-width: 450px;
}

.region.left {
	min-width: 450px;
}

there’s also max-width if you want to lock it solid.

Easy.

[MMRIZE]

The center position is the weirdest thing of MM. The width of center is decided by this code;

.region.top.center,
.region.bottom.center {
  left: 50%;
  transform: translateX(-50%);
}

This code looks so intuitive, but not so really. It is calculated and applied after rendering, so that makes some issues;

Anyway, this code would be a help for what you want;

.region.left {
  width: 50%;
  background-color: rgba(255,0,0, 0.2); /* to check how it shows visibly; remove this line later. */
}

.region.right {
  width: 50%;
  background-color: rgba(0,255,0, 0.2); /* to check how it shows visibly; remove this line later. */
}

.region.center {
  display:none;
}

By the way, current structure of MM’s positioning becomes a bit old and stubborn legacy.(almost 7 or 8 years old) Maybe we need to progress with more modern techs.

[BKeyport]

@MMRIZE I would love to see it reworked, mostly to add the missing 2 positions. (middle left, middle right)