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?

Community
  • 1
  • 1
Yonatan Lazar Telem
  • 369
  • 2
  • 13

2 Answers2

23

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.

Gabriel Devenyi
  • 324
  • 2
  • 6
  • 2
    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 – Mike M Feb 06 '21 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 Aug 01 '21 at 16:38
  • 1
    @Adel Add "margin-left: auto;" and "margin-right: auto;" to the body element above. – dusky Apr 30 '22 at 00: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 Apr 21 '23 at 18:12
22

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.

Martin Schmelzer
  • 23,283
  • 6
  • 73
  • 98
  • 3
    This works for me, but not if I'm using a floating TOC :( – rrr Nov 06 '17 at 21:05
  • @Thorst Due to changes in the tempalte it did not work anymore. I have corrected the code. – Martin Schmelzer Apr 02 '20 at 08: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 Jan 27 '22 at 10:42