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,
    .region.middle.center {
      width: 100%;
      text-align: center;
      transform: translateY(-50%);
    }
    
    .region.upper.third {
      top: 33%;
    }
    
    .region.middle.center {
      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