> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/samita-countdown-timer-bar/design-and-translation/custom-css.md).

# Custom CSS

Use the Custom CSS box when the design controls don't reach far enough.

Every countdown type ends its design settings with a **Custom CSS (Developer Zone)** box. Anything you put there is applied to that countdown on your storefront, on top of everything the visual controls have set.

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2Fgit-blob-a3423d87460a43b5126490ee268a0e64b4806779%2Fscreenshot-design-custom-css.png?alt=media" alt="The Custom CSS Developer Zone box at the bottom of the design settings"><figcaption><p>The Custom CSS box, at the end of the design settings.</p></figcaption></figure>

{% hint style="warning" %}
This is an escape hatch, not a first resort. CSS written here isn't checked, isn't previewed reliably, and will keep applying even if your theme changes underneath it. Try the visual controls first — they cover most of what stores need.
{% endhint %}

## When it's genuinely useful

* **Fine positioning** — nudging a countdown's margins to sit correctly in a theme with unusual spacing.
* **Responsive tweaks** — a media query for a breakpoint the mobile settings don't cover.
* **Matching a theme detail** — a specific border radius or shadow your theme uses everywhere and the controls can't reproduce exactly.
* **Hiding an element** — removing a part of the countdown you can't switch off any other way.

## Writing it

The box takes plain CSS — selectors and rules, no `<style>` tag:

```css
.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}
```

The countdown's own container carries the class `samita-countdown`, and each rendered countdown gets an ID built from its countdown ID. To target something more specific, inspect the rendered countdown in your browser's developer tools and use the classes you find there.

{% hint style="info" %}
Class names inside the countdown can change when the app is updated. Scoping your CSS to `.samita-countdown` and to your own overrides — rather than deep internal selectors — makes it far less likely to break.
{% endhint %}

## Keep it scoped

CSS in this box isn't automatically limited to the countdown. A selector like `img { ... }` will hit every image on the page.

Always prefix your rules so they only reach the countdown:

```css
/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }
```

## Test it on a real page

The builder preview doesn't reproduce your theme, so CSS that lines something up in the preview may not line it up on your product page. Save, open a real page, and check — on desktop and on a phone.

## If you'd rather not write CSS

Support can help with theme-specific adjustments. The app offers a **Chat now!** button beside the Custom CSS box, described as "Chat with us to customize countdown in your theme." You can also [contact support](/samita-countdown-timer-bar/help/contact-support.md) with a link to the page and a description of what you want changed.

## Next steps

* [Design a countdown](/samita-countdown-timer-bar/design-and-translation/design.md)
* [Display position](/samita-countdown-timer-bar/where-countdowns-appear/position.md)
* [Contact support](/samita-countdown-timer-bar/help/contact-support.md)
* [Countdown not showing](/samita-countdown-timer-bar/help/countdown-not-showing.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.samita.io/samita-countdown-timer-bar/design-and-translation/custom-css.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.