Different body-widths on a website

[snhansen]

Description

I'm creating a website project with the following _quarto.yml:

project:
  type: website

website:
  title: "Title"
  sidebar:
    contents:
      - href: index.qmd
        text: "Index"
      - href: page.qmd
        text: "Page"

format:
  html:
    theme: cosmo
    toc: true

and contents of index.qmd and page.qmd are as follows:

---
title: "Title"

format:
  html:
    grid:
      body-width: 1000px
---

## Header

and

---
title: "Title"

format:
  html:
    grid:
      body-width: 1600px
---

## Header

Now, when I preview this using quarto preview, the index page is loaded with the correct width. When I navigate to the other page this is also loaded with the correct width. But when I navigate back to the index page then the width is "stuck" at 1600 px. What am I doing wrong?

Another thing I noticed is that when the site is deployed, the width of both pages is 1600 px (see https://biostat.au.dk/stefan/test/).

[snhansen]

Ok, so I think the reason why it kinda works when previewing the site with quarto is because the .css files are rebuilt every time you go to a new page. So I guess different body-widths on different pages can't be achieved this way.

[mcanouil]

This is not a document level option, see https://quarto.org/docs/output-formats/page-layout.html#grid-customization.

This change can be made by adding the grid option to the _quarto.yml file.

Use "page layout" for custom page layout, see https://quarto.org/docs/output-formats/page-layout.html#page-layout.

[dasayan05]

@mcanouil sorry to ping on this but I am also facing this issue. I just want one page to have larger body-width than rest of my website. how can I do it exactly ?

PS: I am not very familiar with (s)css. Can you show a little toy example ?

[mcanouil]

There is nothing more to show than what's in the documentation I linked.

[cderv]

I do think this was linked to the longstanding issue for Quarto website to only have one CSS built from bootstrap using customisation at format level though options or Quarto theme file.

This meant that single page customization was not possible, and only configuration at project level was working.

Though we fixed this in 1.6.7 (#10611) and so I think now you can customize grid configuration at page level.

After all, it is a format configuration (https://quarto.org/docs/reference/formats/html.html#layout) and it was a bad bug that this was not working.

You could all try latest 1.6 and see if this works better for you now.

Thank you !

[snhansen]

@cderv: Thanks for coming back to reply to this. I can confirm that it works with v. 1.6.10. Cheers.

[simonleandergrimm]

@cderv Just saying that v1.6.10 also fixed this issue for me. Thanks for taking care of this!