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!


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.