How do I increase the width of the content column in Quarto

Question

I have a quarto html page with a sidebar and a table-of-contents (i.e. a 3 column page). I would like to increase the default-width of the content column (the central column) which is now fixed at ~950px. How do I do that?

quarto.yml

project:
  type: website

website:
  title: "Big Center Section"
  sidebar:
    style: "docked"
    search: false
    contents:
      - section: "Sidebar"
        contents:
          - text: "Item 1"
            url:  ./somewhere.html

format:
  html:
    theme:
      - flatly
      - custom.scss
    css: styles.css
    toc: true

jupyter ipynb page

---
title: "Big wide middle section"
jupyter: python3
format:
    html:
        code-fold: true
        code-line-numbers: true
---


Second cell:

# SOME REALLY REALLY REALLY LONG HEADING I WANT 2000px WIDE.....

Can you please add a [minimal reproductible example](https://stackoverflow.com/help/minimal-reproducible-example) ? — Cédric, Sep 05 '22 at 14:55

shafee · Answer 1 · 2023-01-28T13:41:47.070

Update

Quarto version 1.3 allows setting the width of the sidebar, the body of the document, the margin of the document, and the margins between these elements (gutters) with sidebar-width, body-width, margin-width, and gutter-width options.

sidebar-width, body-width, and margin-width should be specified in pixels (px) and gutter-width may be specified in pixels or other units such as em or rem. It is also possible to use SCSS variables. Read Article Grid Customization from quarto docs for details.

_quarto.yml

project:
    type: website
  
website:
  title: "Big Center Section"
  sidebar:
    style: "docked"
    search: false
    contents:
      - section: "Sidebar"
        contents:
          - index.qmd

format:
  html:
    grid: 
      body-width: 2000px
      sidebar-width: 200px
      margin-width: 200px
    toc: true

Old Answer

We can increase the width of content column by setting width to 2000px of #quarto-document-content (and also changing the margins for right sidebar to push it to the right)

_quarto.yml

project:
    type: website
  
website:
  title: "Big Center Section"
  sidebar:
    style: "docked"
    search: false
    contents:
      - section: "Sidebar"
        contents:
          - index.qmd

format:
  html:
    toc: true
    css: styles.css

index.qmd

---
title: "Big wide middle section"
jupyter: python3
format:
    html:
      code-fold: true
      code-line-numbers: true
---


# SOME REALLY REALLY REALLY LONG HEADING I WANT 2000px WIDE.....

# SOME REALLY REALLY REALLY LONG HEADING I WANT 2000px WIDE.....

# SOME REALLY REALLY REALLY LONG HEADING I WANT 2000px WIDE.....

styles.css

/* css styles */

#quarto-document-content {
  width: 2000px;
}

#quarto-margin-sidebar {
  margin-right: -600px;
  margin-left: 500px;
}

(Note that, I have zoomed out to take this screenshot of the website page)

The problem with this proposed solution is that it doesn't work if you have notes/citations/references in the margin. This workaround only works if you have no margin content. — gradcylinder, Jan 20 '23 at 15:54
yes may be. Can you post a question with reproducible example for this problem so that I can look into this?! @gradcylinder — shafee, Jan 20 '23 at 18:04
@ shafee I'm going to skip adding a reprex; just use the example you used to add `reference-location: margin` to the format section. Then put something in the margin and render your page. — gradcylinder, Jan 22 '23 at 17:18

How do I increase the width of the content column in Quarto

1 Answers1

Update

Old Answer

Linked