> For the complete documentation index, see [llms.txt](https://docs.hurrytimer.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hurrytimer.com/getting-started/changing-the-countdown-timer-appearance.md).

# 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;
}
```