Change width of callout-block in Quarto dashboard

Question

I would like to create a Quarto dashboard where my callout-block has a different width than the page. Now it uses the full page width which is not what I want. Here is some reproducible code:

---
title: "Test"
format: dashboard
---

# Test

<h1>This is an example!</h1> 

I'm trying to change the width of my callout-block below!

::: {.callout-note}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

Output:

As you can see it uses the full width of the dashboard. But I would like to use only 30% of the width for example. I tried using some css like described here, but it is not working for me. So I was wondering if anyone knows how to change the width of this callout-block in a Quarto dashboard?

Answer 1

You can use !important to ensure that the style attribute overrides any other attributes set elsewhere:

One file

---
title: "Test"
format: dashboard
---

# Test

<style>
.narrow {
    width: 30% !important;
}
</style>

<h1>This is an example!</h1> 

I'm trying to change the width of my callout-block below!

::: {.callout-note .narrow}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

Separate files

If you prefer separate files. Here you can have dashboard.qmd:

---
title: "Test"
format: 
    dashboard:
        css: styles.css
---

# Test

<h1>This is an example!</h1> 

I'm trying to change the width of my callout-block below!

::: {.callout-note .narrow}
Note that there are five types of callouts, including:
`note`, `warning`, `important`, `tip`, and `caution`.
:::

Then styles.css:

.narrow {
    width: 30% !important;
}