Countdown timer widget: Change font size and centre countdown numbers

[Ryan]

Hi,

I am having issues with styling the countdown widget. I tried the following css but had no luck

.tribe-events-countdown-widget div.tribe-countdown-days.tribe-countdown-number,
.tribe-events-countdown-widget div.tribe-countdown-hours.tribe-countdown-number,
.tribe-events-countdown-widget div.tribe-countdown-minutes.tribe-countdown-number,
.tribe-events-countdown-widget div.tribe-countdown-seconds.tribe-countdown-number { 
	font-size:30px !important;
}
.tribe-events-countdown-widget {
	text-align:center;
}

Please advise
Thanks

[Ryan]

Sorry I meant to say that I also tried the following for centring the numbers:

.widget.tribe-events-countdown-widget {
    width: 100%;
    margin: 0 auto;
}

[Brian]

Hi,

Thanks for using Pro.

I can help out here.

Do you have a link where the widget is active and I can make some suggestions?

Let me know.

Thanks

[Ryan]

Hi Brian,

See following link to our dev domain http://www.amanzimedia.com/aardkloplabs/

Thanks

[Brian]

Thanks for the link.

This one is a little tricky to do since the js is always changing the divs.

Try out this css:

.widget.tribe-events-countdown-widget .tribe-countdown-timer {
margin: 0 auto;
width: 200px;
}

Add that css to your theme’s stylesheet or through a plugin such as Simple Custom CSS.

Let me know if that helps.

Thanks

[Brian]

Since I haven’t heard back from you here, I’m going to go ahead and close out this thread. Feel free to start a new thread if you have further issues. Thanks! 🙂

[Author]

Posts