MagicMirror² v2.14.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%"


    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., {
      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!

  • Did anyone every find an answer to this? I have search the forums up and down but no good answer for how to restrict the center regions to set a max width.

Log in to reply