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.

    Help with a flexbox item that is not aligning.

    Scheduled Pinned Locked Moved Custom CSS
    11 Posts 2 Posters 612 Views 2 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 Away
      sdetweil @sdetweil
      last edited by

      @bobbylx many styles are not
      inherited thru the content tree
      you did
      .MMM-MoonPhase

      that is a class that appears on a div that also has .module

      size styles do not inherit down, because then everything would be the same size, and just a jumble of bits

      Sam

      How to add modules

      learning how to use browser developers window for css changes

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

        @bobbylx
        google search

        flexbox alignment styles

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          @sdetweil I’ve gone through a plethora of pages regarding Flexbox. What I am failing to understand, and probably in part due to my limited coding experience, is why only that single item of the 4 is not cooperating.
          The way I understand is I have the flex container, which in this case is the top_bar? Then I have items within the container. My flex items would be the .clock, .weather, .weather and .MMM-MoonPhase. So should I be using a word other than .MMM-MoonPhase when adjusting the flex box position? Such as, in the example below, should .MMM-MoonPhase be replaced with another code that will then apply to the moon phase? This is where it gets muddy for me. And I know the second MMM-MoonPhase down there by itself is redundant, I was just testing.

          .clock, .weather, .MMM-MoonPhase {
          	display: inline-flex;
          	justify-content: space-around;
                  align-items: flex-start;
                  margin-right: 25px;
          	margin-left: 25px;
                  background-color:rgba(255, 255, 255,0.6);    
                  width: 300px;
                  height: 180px;
          	border-radius:20px;
                  padding: 8px;
                  color: #616161;
                	}
          .MMM-MoonPhase {
          	background-color: rgba(255, 255, 255, 0.6);
          	width: 250px;
          	height: 180px;
          	border-radius:20px;
                  padding: 8px;
                  color: #616161;
          }
          

          So if bring up the developers window, and change the inline-flex, align-items, they all 4 move around, just that single Moonphase is slight off from the others.

          Screenshot_20250507_152414.png

          Honestly, I’ve been tweaking and editing this thing for a good year or so, I might be better off making a backup of some stuff and starting fresh.

          S 2 Replies Last reply Reply Quote 0
          • S Away
            sdetweil @bobbylx
            last edited by sdetweil

            @bobbylx when you are trying to do left right alignment you need to move the dev window to a different edge, else the content wraps, oops

            this us called docking the dev window,
            you can dock it on the bottom edge, top right of the dev window is the menu (3 dots)

            Sam

            How to add modules

            learning how to use browser developers window for css changes

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

              @bobbylx flex means slides

              what are the rules for the flexbox?

              when an item is in s flexbox its position is relative to the flex box position on the screen

              flex-end puts me at the end of the flex, flex-center is center, flex-start is at the beginning, youmight need self-align, then x,y
              relative to the flex box area

              x:50% starts your left edge at the middle

              looks like moonphase set its own padding

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • B Offline
                bobbylx
                last edited by

                Thanks for the info.

                As for my horizontal alignment, I’ve got those where I like, and yeah I was aware of the content wrap. I have ssh session and a remote desktop over to my Pi box, so whenever I make a change I restart the process, which closes the developer box. I only open it to check things, but I’m not doing configurations based on the wrapped content when the box is present.

                I’ll probably just remove that moonphase anyway, heck, I just need to look out the window.

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

                  @bobbylx I did this

                  .region.bar.top .container {
                          display: inline-flex !important;
                          flex-direction: row;
                  }
                  .clock, .weather , .MMM-MoonPhase {
                          margin-right: 25px;
                          margin-left: 25px;
                          background-color:rgba(255, 255, 255,0.6);
                          width: 300px;
                          height: 180px;
                          border-radius:20px;
                          padding: 8px;
                  }     
                  

                  and got this
                  Screenshot at 2025-05-07 16-19-37.png

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

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

                    @sdetweil You sir are a saint. That’s exactly what I was missing, I suspected I needed to separate the individual items from the flexbox, but lacked the knowledge to do it! Thank you!

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

                      @bobbylx it took me a few(hundred) tries too…

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 1
                      • 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