Override rmarkdown theme in order to change html page width

Question

I\'m trying to widen the output of rmarkdown to html. I\'ve been trying this solution with no success (although I\'m using the cerulean theme, that should be responsive acco

Answer 1

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.

Answer 2

Add these style definitions directly to your RMarkdown document:

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

Alternatively you can put the style definitions in an external file like styles.css which you link to by setting the appropriate options in the YAML header as described here:

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

Both options work for me.