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?
You can use !important
to ensure that the style attribute overrides any other attributes set elsewhere:
---
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`.
:::
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;
}