3. Limiting width of the "Center" modules and retaining centering
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

  • J

    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!

    0