Increase the width used by gitbook - Solved

gitbook

#1

Hi,

Gitbook html output is really neat but leave 30-40% of the screen real estate as white background... Is there a way to decrease this amount of side margins, ie increase the width dedicated to content?

Thanks


#2

I don't know about if there is a way to do it using the bookdown::gitbook but you could likely do it by adding some custom css to your document.

You can add custom css by including it in the YAML like this:

---
output:
  revealjs::revealjs_presentation:
    css: styles.css
---

You can then add something like this to your styles.css file:

.page-inner {
  width: 95%;
}

I am not sure the class of the gitbook output for the portion of your document you want to make wider. But .page-inner is the name of the div class that is used in the bookdown book so that is a slight chance they are the same. You can find the exact class of this div using the developer tools for your browser.


#3

@tbradley

Thank you for you reply. I have tested inserting the suggested css in my own styles.css file... It had no visible effect.
Looking at the structure of gitbook html output, the div of page-inner is within a div of class page_wrapper. Putting the suggested css in a .page_wrapper section of the styles.css had also no effect.

From that shotgun approach, you can probably conclude that I am not a web developer :smiley:


#4

Eureka!

It looks like some classes higher in the hierarchy constrain the default maximum width to 800px for the "main" content of the book.

The following seems to work... I shall see if adjustments are needed. Thanks @tbradley for point me towards the right path.

.book .book-body .page-wrapper .page-inner {
  max-width: 90%;
}

#5

If your question's been answered, would you mind choosing a solution properly? It helps other people see which questions still need help, or find solutions if they have similar problems. There is a mechanism for that, that is better that editing the title. Here’s how to do it:


#6

@cderv
Thanks for your message. I knew it was possible but forgot how to mark my post as solved.