Override rmarkdown theme in order to change html page width

Create a file styles.css with your styles:

<style>
.main-container {
  width: 100%;
    max-width: unset;
  }
</style>

And include it in your rmarkdown as described here:

---
output:
  html_document:
    css: styles.css
---

Both options work for me.


The answer above didn't work so I spent a bunch of time sorting this out. It seems you can no longer just dump raw CSS into the rmarkdown document and have it be properly included.

This solution worked for me. Note that I had to modify the max width of both the body and the main container, this is placed as a block right after the yaml header.

    ```{css, echo=FALSE}
    body .main-container {
      max-width: 1280px !important;
      width: 1280px !important;
    }
    body {
      max-width: 1280px !important;
    }
    ```

Here's the reference for how to properly integrate css: https://bookdown.org/yihui/rmarkdown/language-engines.html#javascript-and-css

I can't find any references for the the various properties that need to be modified, I figured everything out from the Chrome developer console.

Tags:

Css

R

R Markdown