MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Limiting width of the "Center" modules and retaining centering

    Scheduled Pinned Locked Moved Troubleshooting
    2 Posts 2 Posters 1.1k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J Offline
      Johnson22
      last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • M Offline
        mlcampbe
        last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Sam, technical setup by Karsten.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy