• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 312 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 Nov 22, 2024, 7:31 AM

    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 Nov 22, 2024, 12:03 PM Reply Quote 0
    • S Offline
      sdetweil @kasperinline
      last edited by Nov 22, 2024, 12:03 PM

      @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 Nov 22, 2024, 8:28 PM Reply Quote 1
      • K Offline
        kasperinline @sdetweil
        last edited by Nov 22, 2024, 8:28 PM

        @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 Nov 22, 2024, 8:46 PM

          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 Nov 22, 2024, 9:26 PM Reply Quote 1
          • S Offline
            sdetweil @kasperinline
            last edited by Nov 22, 2024, 9:26 PM

            @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
            1 / 1
            • First post
              4/5
              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