Scale Up Flipclock.js
I've got a site which uses flipclock.js. I've been going through a bit of trouble making it larger, so it takes up more space on the page.
Does anyone know how to scale it up, or make it larger?
css flipclock
asked Nov 26 '18 at 6:15
Jerome PapalieJerome Papalie
295
add a comment |
I've got a site which uses flipclock.js. I've been going through a bit of trouble making it larger, so it takes up more space on the page.
Does anyone know how to scale it up, or make it larger?
css flipclock
asked Nov 26 '18 at 6:15
Jerome PapalieJerome Papalie
295
Can you share any URL or snippet here? So we can understand how can you scale it up...
– ElusiveCoder
Nov 26 '18 at 6:46
Hi @CodeGator the url I'm using for reference is codepen.io/sarus/pen/xjKEZq?editors=0100
– Jerome Papalie
Nov 26 '18 at 6:49
1
You can do it like this... .flip-clock-wrapper { transform: scale(1.5); }
– ElusiveCoder
Nov 26 '18 at 6:51
add a comment |
I've got a site which uses flipclock.js. I've been going through a bit of trouble making it larger, so it takes up more space on the page.
Does anyone know how to scale it up, or make it larger?
css flipclock
asked Nov 26 '18 at 6:15
Jerome PapalieJerome Papalie
295
I've got a site which uses flipclock.js. I've been going through a bit of trouble making it larger, so it takes up more space on the page.
Does anyone know how to scale it up, or make it larger?
css flipclock
css flipclock
asked Nov 26 '18 at 6:15
Jerome PapalieJerome Papalie
295
asked Nov 26 '18 at 6:15
Jerome PapalieJerome Papalie
295
asked Nov 26 '18 at 6:15
Jerome PapalieJerome Papalie
295
asked Nov 26 '18 at 6:15
Jerome PapalieJerome Papalie
295
asked Nov 26 '18 at 6:15
Jerome PapalieJerome Papalie
295
295
Can you share any URL or snippet here? So we can understand how can you scale it up...
– ElusiveCoder
Nov 26 '18 at 6:46
Hi @CodeGator the url I'm using for reference is codepen.io/sarus/pen/xjKEZq?editors=0100
– Jerome Papalie
Nov 26 '18 at 6:49
1
You can do it like this... .flip-clock-wrapper { transform: scale(1.5); }
– ElusiveCoder
Nov 26 '18 at 6:51
add a comment |
Can you share any URL or snippet here? So we can understand how can you scale it up...
– ElusiveCoder
Nov 26 '18 at 6:46
Hi @CodeGator the url I'm using for reference is codepen.io/sarus/pen/xjKEZq?editors=0100
– Jerome Papalie
Nov 26 '18 at 6:49
1
You can do it like this... .flip-clock-wrapper { transform: scale(1.5); }
– ElusiveCoder
Nov 26 '18 at 6:51
Can you share any URL or snippet here? So we can understand how can you scale it up...
– ElusiveCoder
Nov 26 '18 at 6:46
Can you share any URL or snippet here? So we can understand how can you scale it up...
– ElusiveCoder
Nov 26 '18 at 6:46
Hi @CodeGator the url I'm using for reference is codepen.io/sarus/pen/xjKEZq?editors=0100
– Jerome Papalie
Nov 26 '18 at 6:49
Hi @CodeGator the url I'm using for reference is codepen.io/sarus/pen/xjKEZq?editors=0100
– Jerome Papalie
Nov 26 '18 at 6:49
1
1
You can do it like this... .flip-clock-wrapper { transform: scale(1.5); }
– ElusiveCoder
Nov 26 '18 at 6:51
You can do it like this... .flip-clock-wrapper { transform: scale(1.5); }
– ElusiveCoder
Nov 26 '18 at 6:51
add a comment |
2 Answers
2
active
oldest
votes
The clock adapts based on the font-size. If you change the font size in the codepen you provided in the comments ( https://codepen.io/sarus/pen/xjKEZq?editors=0100 ) the whole clock scales up/down. You can also adjust border-radius, gap and the dot size individually.
Basically, the first 4 SASS variables are intended to be changed:
//
// ------------------------- FlipClock
//
$clock-flip-font-size: 200px
$clock-flip-border-radius: 8px
$clock-digit-gap: 40px
$clock-dot-size: 20px
answered Nov 26 '18 at 9:51
FitziFitzi
428310
add a comment |
Add this sass and you're done....
.countdown.flip-clock-wrapper
transform: scale(1.5)
answered Nov 26 '18 at 6:55
ElusiveCoderElusiveCoder
1,4111420
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475626%2fscale-up-flipclock-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The clock adapts based on the font-size. If you change the font size in the codepen you provided in the comments ( https://codepen.io/sarus/pen/xjKEZq?editors=0100 ) the whole clock scales up/down. You can also adjust border-radius, gap and the dot size individually.
Basically, the first 4 SASS variables are intended to be changed:
//
// ------------------------- FlipClock
//
$clock-flip-font-size: 200px
$clock-flip-border-radius: 8px
$clock-digit-gap: 40px
$clock-dot-size: 20px
answered Nov 26 '18 at 9:51
FitziFitzi
428310
add a comment |
The clock adapts based on the font-size. If you change the font size in the codepen you provided in the comments ( https://codepen.io/sarus/pen/xjKEZq?editors=0100 ) the whole clock scales up/down. You can also adjust border-radius, gap and the dot size individually.
Basically, the first 4 SASS variables are intended to be changed:
//
// ------------------------- FlipClock
//
$clock-flip-font-size: 200px
$clock-flip-border-radius: 8px
$clock-digit-gap: 40px
$clock-dot-size: 20px
answered Nov 26 '18 at 9:51
FitziFitzi
428310
add a comment |
The clock adapts based on the font-size. If you change the font size in the codepen you provided in the comments ( https://codepen.io/sarus/pen/xjKEZq?editors=0100 ) the whole clock scales up/down. You can also adjust border-radius, gap and the dot size individually.
Basically, the first 4 SASS variables are intended to be changed:
//
// ------------------------- FlipClock
//
$clock-flip-font-size: 200px
$clock-flip-border-radius: 8px
$clock-digit-gap: 40px
$clock-dot-size: 20px
answered Nov 26 '18 at 9:51
FitziFitzi
428310
The clock adapts based on the font-size. If you change the font size in the codepen you provided in the comments ( https://codepen.io/sarus/pen/xjKEZq?editors=0100 ) the whole clock scales up/down. You can also adjust border-radius, gap and the dot size individually.
Basically, the first 4 SASS variables are intended to be changed:
//
// ------------------------- FlipClock
//
$clock-flip-font-size: 200px
$clock-flip-border-radius: 8px
$clock-digit-gap: 40px
$clock-dot-size: 20px
answered Nov 26 '18 at 9:51
FitziFitzi
428310
answered Nov 26 '18 at 9:51
FitziFitzi
428310
answered Nov 26 '18 at 9:51
FitziFitzi
428310
answered Nov 26 '18 at 9:51
FitziFitzi
428310
428310
add a comment |
add a comment |
Add this sass and you're done....
.countdown.flip-clock-wrapper
transform: scale(1.5)
answered Nov 26 '18 at 6:55
ElusiveCoderElusiveCoder
1,4111420
add a comment |
Add this sass and you're done....
.countdown.flip-clock-wrapper
transform: scale(1.5)
answered Nov 26 '18 at 6:55
ElusiveCoderElusiveCoder
1,4111420
add a comment |
Add this sass and you're done....
.countdown.flip-clock-wrapper
transform: scale(1.5)
answered Nov 26 '18 at 6:55
ElusiveCoderElusiveCoder
1,4111420
Add this sass and you're done....
.countdown.flip-clock-wrapper
transform: scale(1.5)
answered Nov 26 '18 at 6:55
ElusiveCoderElusiveCoder
1,4111420
answered Nov 26 '18 at 6:55
ElusiveCoderElusiveCoder
1,4111420
answered Nov 26 '18 at 6:55
ElusiveCoderElusiveCoder
1,4111420
answered Nov 26 '18 at 6:55
ElusiveCoderElusiveCoder
1,4111420
1,4111420
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475626%2fscale-up-flipclock-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you share any URL or snippet here? So we can understand how can you scale it up...
– ElusiveCoder
Nov 26 '18 at 6:46
Hi @CodeGator the url I'm using for reference is codepen.io/sarus/pen/xjKEZq?editors=0100
– Jerome Papalie
Nov 26 '18 at 6:49
1
You can do it like this... .flip-clock-wrapper { transform: scale(1.5); }
– ElusiveCoder
Nov 26 '18 at 6:51