Increase the width used by gitbook - Solved

[pomchip]

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

[tbradley]

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.

[pomchip]

@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

[pomchip]

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%;
}

[cderv]

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:

FAQ: How do I mark a solution?

If your question has been answered, don't forget to mark the solution! How do I mark a solution? Find the reply you want to mark as the solution and look for the row of small gray icons at the bottom of that reply. Click the one that looks like a box with a checkmark in it: [image] Hovering over the mark solution button shows the label, "Select if this reply solves the problem". If you don't see the mark solution button, try clicking the three dots button ( ••• ) to expand the full set of options. When a solution is chosen, the icon turns green and the hover label changes to: "Unselect if this reply no longer solves the problem". Success! [solution_reply_author] …

[pomchip]

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