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-FlipClock and CSS

    Scheduled Pinned Locked Moved Development
    5 Posts 2 Posters 360 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.
    • K Offline
      kasperinline
      last edited by

      Hello everybody

      I have some trouble manipulating the MMM-FlipClock. I want the Clock and the date side-by-side without a huge gap. See the screenshot

      electron_M3iSC96LvM.png

      How do I reduce the gap through CSS? Can anybody point me in the right direction? Se my CSS:

      .tick {
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
      
      .MMM-FlipClock .time {
          order: 1;
      }
      
      .MMM-FlipClock .date {
          order: 2;
      }
      

      I have tried to use margin and padding without any luck. I want to have the content aligned to the left.

      Is i possible?

      Thanks for your help.

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

        @kasperinline I do not know, but you can use the developer window elements tab to view and test changes live

        See the second link in my signature below for a short walkthru

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        K 1 Reply Last reply Reply Quote 1
        • K Offline
          kasperinline @sdetweil
          last edited by

          @sdetweil
          Thanks for your answer - I already tried developer window and a bit of A.I. but I can’t get any further than my screenshot.

          I think I have to study CSS instead of ‘copy/paste’ and trial’n’error as now.

          :-)

          1 Reply Last reply Reply Quote 0
          • K Offline
            kasperinline
            last edited by

            Got it! And learned a little more:

            .tick .medium {
            	font-size: 60px;
            	 text-transform: uppercase;
            }
            
            .tick {
                display: flex;
                align-items: left;
                justify-content: start;
            }
            
            .MMM-FlipClock .time {
                order: 1;
            }
            
            .MMM-FlipClock .date {
                order: 2;
            	align-self: center;
            }
            

            electron_uz6jpbdbja.png

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

              @kasperinline awesome!!

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              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