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.

    MMM-OpenWeatherMapForecast position not budging

    Scheduled Pinned Locked Moved Solved Troubleshooting
    13 Posts 2 Posters 1.4k 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.
    • S Offline
      sdetweil @brgracer
      last edited by

      @brgracer css is MOST SPECIFIC instruction wins…

      so if you have a DIV and a SPAN
      and you target the DIV (not the SPAN) then the elements of the DIV are affected
      and MAYBE some elements on the SPAN that are inherited…

      but if you target the SPAN, the DIV is not affected , so you can set left margin of 0, on the SPAN, but that is INSIDE the DIV

      so the div will not move…

      have you used the developers window (ctrl-shift-i) elements tab to examine and apply styles to the elements?
      see the second link in my sig below for a starter on using it…

      now, the MODULE also supplies a css file, so IT might be more specific too…

      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 @brgracer
        last edited by

        @brgracer can you tell me roughly where you are trying to move the weather ?

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        B 1 Reply Last reply Reply Quote 0
        • B Online
          brgracer @sdetweil
          last edited by

          @sdetweil Ah, as you can see I still have a lot to learn. I have the module set top-right and trying to move it to the upper right corner a bit more.

          As for the developer view, I have tried it but it runs unusably slow on my Pi3 as there is a super long delay between every action. I tried to set my MM in server only mode and access from another PC to try developer mode on the faster machine but could not connect even after whitelisting my IP and changing one setting from localhost to 0.0.0.0

          I guess time for more reading and learning on my end.

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

            @brgracer ok… for remote system debugging

            on MM server side, or MM full…

            address:"0.0.0.0",
            ipWhiteList:[],
            

            then you can access the mirror from other system and use debugger

            there IS a border. around ALL the modules
            defined in main.css

              --gap-body-top: 60px;
              --gap-body-right: 60px;
              --gap-body-bottom: 60px;
              --gap-body-left: 60px;
            

            let me look

            Sam

            How to add modules

            learning how to use browser developers window for css changes

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

              I changed the border in custom.css

              :root {
                --gap-body-top: 50px;
                --gap-body-right: 40px;
                --gap-body-bottom: 60px;
                --gap-body-left: 60px;
              }
              

              the the module went up and over

              Screenshot at 2025-09-10 21-54-14.png

              pushing over the border is hard

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              B 1 Reply Last reply Reply Quote 0
              • B Online
                brgracer @sdetweil
                last edited by

                @sdetweil Maybe I added in the wrong place in custom.css, but it did not move at all for me. Again, odd behavior in loading in a higher position and then snapping to a lower one once fully loaded. I did change the module width to make it more landscape in orientation so not sure if that has anything to do with it.
                PXL_20250913_174002038.jpg

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

                  @brgracer goes at the top

                  Can you show what you changed for module css

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  B 1 Reply Last reply Reply Quote 0
                  • B Online
                    brgracer @sdetweil
                    last edited by

                    @sdetweil I found where to change the border at the top after your post and changing that still did not do anything. I did not touch the module css, but below is what I changed in custom css to resize the module and inc the width so it was more landscape view:

                    .MMM-OpenWeatherMapForecast {
                    transform: scale(0.75);
                    }

                    .MMM-OpenWeatherMapForecast .module-content {
                    width: 650px; /* adjust this to taste */
                    }

                    B 1 Reply Last reply Reply Quote 0
                    • B Online
                      brgracer @brgracer
                      last edited by brgracer

                      Okay, I was finally able to access my MM from another computer where the dev window was not painfully slow. I think I have found the attribute that is making the module immovable, but I have been unsuccessful in correctly adding a line in custom.css that will change that position attribute from the picture from “static” to “relative”.

                      Screenshot 2025-09-15 100306.png

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

                        @brgracer

                        try

                        .module.MMM-OpenWeatherForecast {
                             position:relative !important;
                        }
                        

                        because the setting is made on a more specific statement you need !important to force override

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        B 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • 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