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.

    Layout and positioning on a tiny screen.

    Scheduled Pinned Locked Moved Custom CSS
    8 Posts 4 Posters 4.8k 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.
    • S Offline
      smackenzie5
      last edited by

      This post is deleted!
      1 Reply Last reply Reply Quote 0
      • S Offline
        smackenzie5 @broberg
        last edited by

        @broberg Is there an order of precedence between custom.css, calendar.css, and config.js?

        I’ve added the position, left and top lines above to my custom.css and calendar.css.
        (I put the lines in both just trying to get it to work)

        When I start up MagicMirror, the calendar module is in the correct position when it says “Loading…” but once the calendar loads, the module changes position. To me, it looks like the module is at the “top_left” position below the clock which is what the config.js specifies.

        Any thoughts on why the module is moving position after loading?

        BTW – I added the lines to drop the margin completely to my custom.css and it worked great, no problems.

        Thanks,
        Scott

        brobergB 1 Reply Last reply Reply Quote 0
        • brobergB Offline
          broberg Project Sponsor @smackenzie5
          last edited by

          @smackenzie5

          It should load main.css, then calendar.css and last custom.css

          The last loaded css takes presidene over the others (thats why one should make changes in custom.css only).

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

            Thanks @broberg

            Does the config.js file takes precedence over the css files?

            I’ve tried deleting the calendar’s position line in the config.js file and the calendar module can’t be seen. I tried changing the calendar’s position to absolute in the config.js files and that prevented the mirror from loading at all. Basically, is there anything that needs to be done to the config.js file or should the custom.css file take precedence over everything?

            brobergB 1 Reply Last reply Reply Quote 0
            • brobergB Offline
              broberg Project Sponsor @smackenzie5
              last edited by

              @smackenzie5

              Config.js doesn’t really do anything to the layout, it is the index.html and main.css that defines the different positions that you can use.

              G 1 Reply Last reply Reply Quote 0
              • G Offline
                Giarry88 @broberg
                last edited by

                @broberg said in Layout and positioning on a tiny screen.:

                @smackenzie5

                Config.js doesn’t really do anything to the layout, it is the index.html and main.css that defines the different positions that you can use.

                Hi guys!
                It seems like I am blowing the dust off this old topics!
                By the way… I am trying to change the postions of some modules and I am having the same issue as @smackenzie5 , first it loads the module where i want to place it, but at the end of the loading it increases the size of the top_bar and place it as default.

                this is what I’ve put in the custom.css

                .MMM-network-signal{
                position: absolute;
                transform.scale(0,35);
                left: 1800px;
                top: 0px;
                }

                Is it because it overlaps with the Weather module?

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