# Customize the countdown timer appearance

### Set custom units labels

To set custom units labels, navigate to Appearance > Elements >  Timer Label:

![](/files/-MVTTHxUTvMSJz1ugHIs)

### Customize countdown timer look and feel

You can change countdown timer look and feel and see render live. 

Under Appearance > Elements, you can customize every element style:

#### Timer digits

![](/files/-LrKUdll9JGeInetV6dZ)

#### Timer labels

![](/files/-LrKUq3q2mRtNmFTuT5y)

#### Timer blocks

Time block provide different set of controls to fully customize the countdown timer look and feel:

![](/files/-LrKVcZjLe_L0SeQYeX2)

### Display the timer digit and label horizontally

Navigate to Appearance > Elements > Timer block**.**

In the option **Display**, select **Inline:**

![](/files/-LrKYwxjLEJ7Fsrppaen)

### Display the countdown timer on the same line as the content

Navigate to Appearance > Elements > General:

In the option **Display**, select **Inline:**

![](/files/-LrKZArtXstgWd3Jzg71)

### Add custom CSS

To add your custom CSS code, in your campaign settings, go to *Appearance  → Custom CSS*:

Here're the CSS class selectors you can use to customize the style and size of the campaign's elements:

![CSS class selectors](/files/-Mbx2Peu87qDshJpG3JB)

{% hint style="danger" %}
**IMPORTANT**: Add`.hurrytimer-campaign` before classes and tags you want to target, example: `.hurrytimer-campaign .hurrytimer-timer-digit`\
`{` \
   `font-size: 2em;` \
`}`
{% endhint %}

If you're displaying your campaign in a sticky bar, use these class selectors to target the sticky bar's elements:

* `.hurrytimer-sticky`: The sticky bar.
* `.hurrytimer-sticky-close`: The close button.

#### Apply customization  only for mobile devices

Use these media queries to apply CSS to a specific screen size:

**For mobile:**

```css
@media screen and (max-width: 540px) {
    /* your css code for mobile goes here */
}
```

**Example:** Make the countdown timer digits and labels smaller on mobile:

```css
@media screen and (max-width: 540px) {

    .hurrytimer-campaign .hurrytimer-timer-digit{
        font-size: 15px;
    }
    
     .hurrytimer-campaign .hurrytimer-timer-label{
        font-size: 12px;
    }
    
}
```

**For tablets:**

```css
@media screen and (min-width: 540px) and (max-width: 780px) {
   /* your css code for tablets goes here */
}
```

#### Render countdown timer from right-to-left (RTL)

In order to render the countdown timer units from right to left for languages such Arabic and Hebrew, use the property  `direction: rtl`as below:

```css
.hurrytimer-campaign{
    direction: rtl;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hurrytimer.com/getting-started/changing-the-countdown-timer-appearance.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.