MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Resize middle center region

  • Hello I am currently trying to place MMM-SmartWebDisplay in the middle center of my mirror. I adjusted the width via the config.js file. However, I am unable to make the module any taller than the formatted size of the middle center bar. I am wondering if this is something I have to do from the custom .js file as well as do I resize the region or actual module. Also, I am still learning the css so any help would be greatly appreciated. Thanks

  • Did you ever find a solution? I have the same problem.

  • @dcarls91 i think you could override the regions sizings in custom.css

    this is whats in main.css for the center

    .region.third, {
      width: 100%;
      text-align: center;
      transform: translateY(-50%);
    .region.upper.third {
      top: 33%;
    } {
      top: 50%;
    .region.lower.third {
      top: 66%;

    and index.html (spaces after < because the viewer here does some funny stuff)

            < div class="region upper third">< div class="container">< /div>< /div>
    	< div class="region middle center">< div class="container">< /div>< /div>
    	< div class="region lower third">< div class="container"><br />< /div>< /div>

    so, if u make upper a little smaller and middle a little bigger… it might work out

Log in to reply