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.

    How to get 2 modules side by side?

    Scheduled Pinned Locked Moved Troubleshooting
    10 Posts 4 Posters 9.6k 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.
    • J Offline
      j.e.f.f Project Sponsor Module Developer @BananaBro
      last edited by

      @BananaBro to adjust the space in between, play with the percentages. The 49% value is the width of the modules, and the 2% is the space in between. Adjust them so the total adds up to 100% — in this case, 2 x 49 + 2. So if you wanted more space in between — say you increase the 2% value to 6% then you would decrease the module width from 49% to 47%. Keep adjusting until you are happy.

      As for the start up time, I haven’t noticed custom.css causing abnormally long startup time, and my custom.css file has quite a lot in it. Could be something else going on.

      B 1 Reply Last reply Reply Quote 0
      • B Offline
        BananaBro @j.e.f.f
        last edited by

        @j.e.f.f thx for the help. i tried to play with the percentages but it breaks the layout of the module. is there a possibility to grant more space in total?

        J 1 Reply Last reply Reply Quote 0
        • J Offline
          j.e.f.f Project Sponsor Module Developer @BananaBro
          last edited by

          @BananaBro try assigning more width to the bottom_right region:

          .region.bottom.right {
            width: 800px;
            min-width: 800px;
            max-width: 800px;
          }
          

          Adjust 800px until you are happy

          B 1 Reply Last reply Reply Quote 1
          • B Offline
            BananaBro @j.e.f.f
            last edited by

            @j.e.f.f really appreciate your help!

            0_1520793257773_Bildschirmfoto von »2018-03-11 19-33-15«.png

            this is my result for now!

            .region.bottom.right {
              width: 720px;
              min-width: 720px;
              max-width: 720px;
            }
            
            .MMM-PublicTransportBerlin {
              display: inline-block;
              width: 45%;
              max-width: 45%;
              min-width: 45%;
              margin-left: 5%;
            }
            
            .MMM-PublicTransportBerlin:first-child {
              margin-right: 5%;
            }
            
            

            And this is my custom css if anyone is interested. I had to split the margin otherwise there was no space between the two instances.

            B 1 Reply Last reply Reply Quote 0
            • C codac referenced this topic on
            • B Offline
              bertories @BananaBro
              last edited by

              @BananaBro

              Re: How to get 2 modules side by side?

              I am trying to have my Weather modules next to each other. I get close following this post, but I can’t seem to get them next to each other. I have played with the % on width and things and I can’t get the tops even.

              .weather {
              display: inline-block;
              width: 47%;
              max-width: 47%;
              min-width: 47%;
              }
              .weather:first-child {
              margin-right: 6%;
              }
              .region.top.right {
              width: 600px;
              min-width: 600px;
              max-width: 600px;
              }

              Link to image:
              https://www.dropbox.com/scl/fi/377vilalfvri9btnyc195/Screenshot-5.png?rlkey=77qpb4f05qh5zp6iqfa8e28o0&dl=0

              Thank you,

              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