MMM-FlipClock and CSS

kasperinline

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

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.

sdetweil

@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

kasperinline

@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.

:-)

kasperinline

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;
}

sdetweil

@kasperinline awesome!!