Hi, you can use simple CSS scripts to hide/show your large/small countdown to do that, try to insert these example script on you post

<style>
#small_countdown{
    position:relative;
    text-align: center;
}
#large_countdown{
    position:relative;
    text-align: center;
}
@media screen and (max-width:1000px){
    #small_countdown{
        left:0px;
    }
    #large_countdown{
        left:-10000px;
    }
}
@media screen and (min-width:1000px){
    #small_countdown{
        left:-10000px;
    }
    #large_countdown{
        left:0px;
    }
}
</style>

<div id="small_countdown">[jcountdown timetext="2020/01/01 00:00:00" timezone="8" style="flip" color="white" width="300" textgroupspace="15" textspace="0" reflection="true" reflectionopacity="10" reflectionblur="0" daytextnumber="3" displayday="true" displayhour="true" displayminute="true" displaysecond="true" displaylabel="true" onfinishredirecturl=""]2020/01/01 00:00:00[/jcountdown]</div>
<div id="large_countdown">[jcountdown timetext="2020/01/01 00:00:00" timezone="8" style="flip" color="white" width="600" textgroupspace="15" textspace="0" reflection="true" reflectionopacity="10" reflectionblur="0" daytextnumber="3" displayday="true" displayhour="true" displayminute="true" displaysecond="true" displaylabel="true" onfinishredirecturl=""]2020/01/01 00:00:00[/jcountdown]</div>

please check the help file

Hi, this is only for countdown for now

I did request it I would like this to work in DIVI it’s a great plugin on its own. And it works fine within Visual Composer it would be ashame for it to not load in DIVI.

BTW I requested you to email me your email so I can send you a user account btw.

just reply your mail, please check your mailbox

Hi,

you almost did it right, all you need to do is set a small “width” setting to the shortcode inside the “small_size_countdown”, try to replace it with my example code below

e.g.

<div id="small_size_countdown">[jcountdown timetext="2017/3/25 9:00:00" timezone="-5" style="slide" color="white" width="300" textgroupspace="15" textspace="0" reflection="true" reflectionopacity="10" reflectionblur="0" daytextnumber="3" displayday="true" displayhour="true" displayminute="true" displaysecond="true" displaylabel="true" onfinishredirecturl=""]2020/01/01 00:00:00[/jcountdown]</div>

i’ve added them but nothing changed… is there somewhere specific in the style.css i was supposed to add it?

figured it out! thx!

i’ve looked through the comments and tried several of your code suggestions but i am still unable to get the timer to change sizes on mobile pls help! thx!

Hi, I sent the scripts to jonathan@tdhstrategies.com, but you can give me your other email address, so I can send it to you

1) How can I centre the counter on the page?
just add a div and set the CSS text-align to center, and put your ShortCode inside it
e.g.

<div style="text-align:center">
[ShortCode Here]
</div>

2) How can I make the labels in black text?
please read the help file, you can edit the psd file to change the label text style in your photoshop, and replace it

Actually I couldn’t open the help files. Can you send it to me please? Thanks for all your help.

you can find the help files inside the source zip files, but just in case I sent it to you again

Hi, you can use simple CSS scripts to hide/show your large/small countdown to do that, try to insert these example script on you post

<style>
#small_countdown{
    position:relative;
    text-align: center;
}
#large_countdown{
    position:relative;
    text-align: center;
}
@media screen and (max-width:1000px){
    #small_countdown{
        left:0px;
    }
    #large_countdown{
        left:-10000px;
    }
}
@media screen and (min-width:1000px){
    #small_countdown{
        left:-10000px;
    }
    #large_countdown{
        left:0px;
    }
}
</style>

<div id="small_countdown">[jcountdown timetext="2020/01/01 00:00:00" timezone="8" style="flip" color="white" width="300" textgroupspace="15" textspace="0" reflection="true" reflectionopacity="10" reflectionblur="0" daytextnumber="3" displayday="true" displayhour="true" displayminute="true" displaysecond="true" displaylabel="true" onfinishredirecturl=""]2020/01/01 00:00:00[/jcountdown]</div>
<div id="large_countdown">[jcountdown timetext="2020/01/01 00:00:00" timezone="8" style="flip" color="white" width="600" textgroupspace="15" textspace="0" reflection="true" reflectionopacity="10" reflectionblur="0" daytextnumber="3" displayday="true" displayhour="true" displayminute="true" displaysecond="true" displaylabel="true" onfinishredirecturl=""]2020/01/01 00:00:00[/jcountdown]</div>

Scratch that, using a different approach.

thanks for your advice, I will fix it in next update, and please leave the message with the account that you purchase this item next time thanks

Hi, I think maybe the “Revolution slider” or some of your plugins was break the jCountdown functions, you can try to disable your plugins to fix it, and if it still fix it up, maybe you can send me your site admin account id and password here https://codecanyon.net/user/ufoufoufo so I can try to check your plugins and scripts

ah nvm, right in front of my face

cool, have a nice fay

Hi,

1) you can change label text in photoshop, please read the help file,

2) all you need is set the CSS text-align to center, e.g.

<div style="text-align:center">
  [jcountdown]2018/01/01 00:00:00[/jcountdown]
</div>

Nevermind—I think it was an issue with CDN/auto-minifying

cool, have a nice day

Hi, don’t worry, it’s just some CSS issue in your theme, all you need is insert these CSS scripts to fix it up

<style>
#main-wrapper.fw-100 .jCountdown .container{
    width:auto !important;
}
</style>

sure, it works fine on wp 4.6.1

Hi, just sent the mail, please check your mail box

Hi, seems it some of your CSS scripts crash the jCountdown, but don’t worry, try to insert these CSS scripts in your site, it should solve the problem

<style>
.jCountdown .container:before{
    content:none !important;
}
.jCountdown .container:after{
    content:none !important;
}
.jCountdown .container{
    padding-top:6px !important;
}
.jCountdown *{
    box-sizing: content-box !important;
}
.jCountdown .group>.label{
    margin:0px !important;
    left:auto !important;
}
</style>

and feel free to contact me here https://codecanyon.net/user/ufoufoufo if you have any questions

Great, thanks!

Hi, it sounds like some CSS issue, maybe some jCountdown CSS setting was overwrite by other CSS scripts, but don’t worry, please send me your site URL here https://codecanyon.net/user/ufoufoufo/portfolio so I can help you