Framework Page Title Width

Community Help
1

Hi. How can I tweak (expand) the title width in my observable framework page? Here is my code:

---
theme: [light, wide]
---

# My Chart Title Wraps Too Early ...

js

import {cust_histogram} from "./components/cust_histogram.js";
const max_donation_hist = FileAttachment("data/max_donation_hist.tsv").tsv({typed: true});

<div class="grid grid-cols-1">
  <div class="card grid-rowspan-1">
    ${resize(width => cust_histogram(max_donation_hist, {width}))}
  </div>
</div>

My # title line is only half as wide as the chart, and then it wraps. The front matter “wide” parameter seems to only apply to the charts.

Thanks for any advice.

2

The default stylesheet applies a max-width here:

You could disable that by using a custom style on the page:

<style type="text/css">

h1 {
  max-width: none;
}

</style>

Or you could specify the title in HTML:

<h1 style="max-width: none;">My Chart Title</h1>
3

Thanks so much!