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

user_10012183 0
Viewed 137

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.....
quarto containers css
1 Answers

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;
}

with a content column of width 2000px

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

user_108583210
Related