8

At the risk of getting a couple of down votes, I have to ask this after spending a few hours this afternoon trying to unravel the css of the bookdown html document that I am working on. For the life of me I just cannot figure out the selectors to use to increase the max-width of the main text area of the bookdown document. I am working with some content that would really benefit from using more of my large monitors.

My latest attempt to get the specificity that I need is a custom css file that contains:

.book .book-body.fixed .body-inner .page-wrapper .page-inner .normal .section .level1 .unnumbered {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

I have tried numerous combinations of selectors and I just can't get that max-width to budge from the 800px default.

For testing purposes, here is an example bookdown document.

Ethan
  • 3,410
  • 1
  • 28
  • 49
jkgrain
  • 769
  • 5
  • 20

1 Answers1

12

Try this:

.book .book-body .page-wrapper .page-inner {
  max-width: 1200px !important;
}
Ethan
  • 3,410
  • 1
  • 28
  • 49
  • That got it. the **!important;** was the bit I was missing. – jkgrain Nov 01 '17 at 23:52
  • 1
    where does this .css go? – The Unfun Cat Nov 15 '18 at 14:42
  • 2
    @TheUnfunCat Generally, the CSS goes into your working directory. But it depends on what you are saying in your _output.yml file. I prefer to collect all CSS files in a separate folder. So I write "css: 'css/mystyle.css'" under my bookdown::gitbook header. – petzi Feb 04 '20 at 10:03
  • You can embed the CSS code in your Rmd file between ``` – Emiliano A. Carlevaro Jun 17 '22 at 03:22