<![CDATA[MMM-FlipClock and CSS]]>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.

]]>https://forum.magicmirror.builders/topic/19161/mmm-flipclock-and-cssRSS for NodeSun, 12 Jul 2026 00:24:16 GMTFri, 22 Nov 2024 07:31:16 GMT60<![CDATA[Reply to MMM-FlipClock and CSS on Fri, 22 Nov 2024 21:26:33 GMT]]>@kasperinline awesome!!

]]>https://forum.magicmirror.builders/post/121514https://forum.magicmirror.builders/post/121514Fri, 22 Nov 2024 21:26:33 GMT<![CDATA[Reply to MMM-FlipClock and CSS on Fri, 22 Nov 2024 20:46:22 GMT]]>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

]]>https://forum.magicmirror.builders/post/121512https://forum.magicmirror.builders/post/121512Fri, 22 Nov 2024 20:46:22 GMT<![CDATA[Reply to MMM-FlipClock and CSS on Fri, 22 Nov 2024 20:28:14 GMT]]>@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.

:-)

]]>https://forum.magicmirror.builders/post/121511https://forum.magicmirror.builders/post/121511Fri, 22 Nov 2024 20:28:14 GMT<![CDATA[Reply to MMM-FlipClock and CSS on Fri, 22 Nov 2024 12:03:02 GMT]]>@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

]]>https://forum.magicmirror.builders/post/121508https://forum.magicmirror.builders/post/121508Fri, 22 Nov 2024 12:03:02 GMT