How to auto scale with screen size

[AntonShumin]

I am trying to understand how to automatically scale the clock for mobile devices. It looks great if the resolution allows it

but breaks completely once i scale

[tangar76]

I think you can achieve proper scaling with custom CSS only. Add your own styles for each screen width (mobile, table, desktop).

[tangar76]

Check this https://github.com/objectivehtml/FlipClock/issues/296#issuecomment-262606984

[AntonShumin]

Searched through other issues, seems that i am not alone with this problem. It is really too bad that this project has been abandoned.

Made it work with media queries. Including 'days', the width is about 640px. Below that, i am using transform: scale(0.5);

However, because scaling happens after the margins are set (if you want to center the flipclock with margin: auto), you'll end up with this issue #201

To fix this, i ended up creating a parent object with fixed width, just enough to hold the full width of the flipclock. Though it was still very hacky with the alignment and the width

<div id="countdown_holder" >
    <div class="countdown"></div>
</div>

[dhavaljardosh]

The same thing happen with me as well.

You can fix it from breaking to the next line by add the

min-width (This will be trial and error according to your clock size) Your wrapper should be given this property.

eg. <div class="wrapper"></div> //This is where the clock is supposed to display

Add the following to the custom CSS

.wrapper{
    min-width:320px;
}

NOTE: This will just help for not breaking. See this for custom settings

[austinarchibald]

@dhavaljardosh thank you for that website! Could not figure out how to make a mini countdown. I just used all of your settings instead.

[dhavaljardosh]

@austinarchibald , so is it done or still facing the issue?

[austinarchibald]

@dhavaljardosh, oh sorry, I was not clear enough. I am not facing the issue. Your instructions worked great. Thanks.

[dhavaljardosh]

Glad it worked 👍