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.

    Easy Center Resizing?

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    6 Posts 4 Posters 916 Views 4 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.
    • amarandA Offline
      amarand
      last edited by

      I’ve asked this question before. At least twice. The answer has always been “edit the CSS” and/or “figure it out yourself.”

      This is supposed to be a project that everyone can figure out.

      All I want to do, is make the middle smaller, so that I don’t have issues with the left and right (the only sides I use!) resizing.

      Look at all that space in the middle. It’s useless. Now notice how the sunrise/sunset module has to word-wrap? Why?

      MagicMirror2023-05-07.jpg

      Is there a SIMPLE, consistent way to make the center smaller, so that the left and right can fill the available space?

      This should not be custom CSS. This should not be rocket science. This should be reproducible, and honestly, I think it should be baked into the configuration file as a binary switch. “Make the middle disappear so that the left and right can fill the space.” Or “Make the middle smaller, because you’re not using it for anything, so why waste all that space?”

      I honestly don’t know if this is a feature request (it’s something that MagicMirror should do natively, but doesn’t), or a bug (maybe I missed something, and there is an easy way to make the middle smaller), or if I’m literally the only person in the MagicMirror community who experiences this sort of thing and no one actually cares?

      Why have I had to ask this question for literally years?

      S 2 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @amarand
        last edited by sdetweil

        @amarand sadly there is no ‘easy’ way

        the default section/position/regions layout is like this
        https://forum.magicmirror.builders/topic/286/regions?_=1683231109633

        no two authors do styling the same way. every thing u tweak makes trouble somewhere else…

        using the developers console is one good tool, but its all still hard work.
        https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1683231109642

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @amarand
          last edited by

          @amarand ps. I’ve been here since 2017, and do a lot of css, and modules… but I couldn’t tell you how to do it, cause I can’t myself.

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          BKeyportB 1 Reply Last reply Reply Quote 0
          • BKeyportB Offline
            BKeyport Module Developer @sdetweil
            last edited by

            @amarand I’d do it like this:

            .region.right {
            	min-width: 450px;
            }
            
            .region.left {
            	min-width: 450px;
            }
            
            

            there’s also max-width if you want to lock it solid.

            Easy.

            The "E" in "Javascript" stands for "Easy"

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

              The center position is the weirdest thing of MM. The width of center is decided by this code;

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

              This code looks so intuitive, but not so really. It is calculated and applied after rendering, so that makes some issues;

              Anyway, this code would be a help for what you want;

              .region.left {
                width: 50%;
                background-color: rgba(255,0,0, 0.2); /* to check how it shows visibly; remove this line later. */
              }
              
              .region.right {
                width: 50%;
                background-color: rgba(0,255,0, 0.2); /* to check how it shows visibly; remove this line later. */
              }
              
              .region.center {
                display:none;
              }
              

              By the way, current structure of MM’s positioning becomes a bit old and stubborn legacy.(almost 7 or 8 years old) Maybe we need to progress with more modern techs.

              BKeyportB 1 Reply Last reply Reply Quote 1
              • BKeyportB Offline
                BKeyport Module Developer @MMRIZE
                last edited by BKeyport

                @MMRIZE I would love to see it reworked, mostly to add the missing 2 positions. (middle left, middle right)

                The "E" in "Javascript" stands for "Easy"

                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