Any way to make the Event Countdown Timer responsive?

Hi

We're using the Event Countdown Add On with our calendar running Events+.

Is there any way of making the timer responsive?

Thanks!

James.

  • Predrag Dubajic

    Hey James,

    Hope you're well :slight_smile:

    Countdown timer by default shouldn't be going over full page width but the font size is fixed so you would want to adjust that for different screen sizes.
    For example, to make font 30 pixels on screens below 800px in width use this CSS:

    @media only screen and (max-width: 800px) {
        #eab_next_event_countdown .countdown_amount {
            font-size: 30px;
        }
    }

    Then for screens below 500 set it to 25 pixels with this:

    @media only screen and (max-width: 500px) {
        #eab_next_event_countdown .countdown_amount {
            font-size: 25px;
        }
    }

    Adjust this for your desired screen sizes and that should be it.

    If your theme doesn't have custom CSS field, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Let us know if you require additional assistance with this :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.