20

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 according to comments). Also tried adding a css element as described here - no effect.

How can I make this work?

2 Answers 2

25

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.

5
  • 3
    omg---super helpful. This right under my YAML and before my markdown let's me modify .main-container (in my case I want much less margin to start with). The basic instructions seemed to be to use the YAML option to include a css file, but that is overridden as theme css is added after :-/ . An inline <style> block also right in the same place - what I had been doing for plain RMarkdown - does not work. This is working today.
    – Mike M
    Commented Feb 6, 2021 at 22:32
  • This makes the left margin shrink to zero and keeps the right margin untouched. Any help to make it centered appreciated!
    – Adel
    Commented Aug 1, 2021 at 16:38
  • 1
    @Adel Add "margin-left: auto;" and "margin-right: auto;" to the body element above.
    – dusky
    Commented Apr 30, 2022 at 0:19
  • This worked for me after I changed "body .main-container {" to "body .main-content {". I am also using the prettydoc sytle, so not sure if that is why it was different for me
    – Jamie_B
    Commented Apr 21, 2023 at 18:12
  • Note - this is still relevant in 2023 and the only suggestion on stack exchange that worked. Commented Sep 6, 2023 at 0:14
23

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.

3
  • 3
    This works for me, but not if I'm using a floating TOC :(
    – rrr
    Commented Nov 6, 2017 at 21:05
  • @Thorst Due to changes in the tempalte it did not work anymore. I have corrected the code. Commented Apr 2, 2020 at 8:56
  • This does not properly work on all my machines. Not sure why: on a windows machine with r 3.5.2. it works. On a Ubuntu with R 4.1. it displays the css definition instead of applying it. The solution below worked for me.
    – hyman
    Commented Jan 27, 2022 at 10:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.