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

Limiting width of the "Center" modules and retaining centering



  • Hello Everyone -

    Looking for a bit of help on centering and limiting width of the center regions. Surprisingly, I cannot find a topic on this forum where someone has had a similar issue. All of my other issues up to this point have been easily found here on this forum!

    My issue is that I would like to limit the width of the center regions - specifically upper_third, middle_center, and lower_third. An example module that I would like to use here is the default Newsfeed or MMM-History.

    I have tried to limit the max width using:

    maxWidth: "50%"
    

    or

    maxWidth : "325px"
    

    in the config.js file. This limits the module’s width, but then offsets the module to the left.

    Since I want the width of these regions to be similar to the top_center or bottom_center regions, I figured that the answer would be somewhere in the main.css text. I tried copying the following from the main.css into the custom.css file and changing the region names, but this did not work either.

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

    Any thoughts, advice, or pointers in the right direction would be greatly appreciated! Thanks!