Modifying content width of Jupyter book, or the Sphinx theme sphinx-book-theme

Question

I am using jupyter-book which by default uses the sphinx-book-theme.

There is a left sidebar, the content in the middle column and a right sidebar. I would like to make the content column wider.

This was answered for the readthedocs-theme, but I'm not sure what style name to use here.

Answer 1

The following style in _static/css/custom.css creates a wider content container for jupyterbook=0.12.1 using pydata-sphinx-theme.css.

To find the class names I used the "Inspect Elements" menu to display and highlight (by hovering the mouse cursor over the elements) the classes for the containers holding the sidebars and primary content (article).

/* -- .bd-container and .bd-container__inner both need to adjust ---------- */
/* -- this so 'outer container' grows with browser (no L/R 'dead space') -- */
.bd-container {
    max-width: 99%;
}

/* -- this so the 'inner container' fills the outer container -------------- */
.bd-container .bd-container__inner {
    max-width: 99%;
}

/* -- .bd-article-container holds the "text in the middle" (notebook / md) ------ */
/* -- width is as high as as 100 "ems" (characters) wide, scales with font size -*/
.bd-main .bd-content .bd-article-container {
    max-width: 100em;
}