Don't Display Read the Docs Sphinx TOC in Narrow Windows

Question

With a narrow window the full Read the Docs window displays content but when the window is widened a Table of Contents appears as a sidebar and the content is less than half the window width. How can the setting be changed so the window must be wider before the TOC is displayed?

I expect this framework with a stylesheet, conf.py reference and custom layout would work with the appropriate css in the source/_static stylesheet. Changing:

.wy-nav-content {
    max-width: 1200px !important;
}

I assume this involves testing if screen width less than a certain value then set display_toc to false. Something like:

/* Set to display toc */
body {
  display_toc: true;
}

/* On narrow screens, set don't display toc */
@media screen and (max-width: 959px) {
  body {
    display_toc: false;
  }
}

Answer 1

The sphinx_rtd_theme version 0.4.3 theme.css seems to support:

• small screen with max-width: 480px
• medium screen with max-width: 768px
• and larger screens

I extracted the @media screen and (max-width: 768px) code and added it with a new width as shown below. (I don't know css so there may be more efficient code.)

Following this process, put a custom.css file in the html_static_path folder (Default is _static) with just the required css, e.g.

@media screen and (max-width: 950px){
    .wy-body-for-nav{background:#fcfcfc}
    .wy-nav-top{display:block}
    .wy-nav-side{left:-300px}
    .wy-nav-side.shift{width:85%;left:0}
    .wy-side-scroll{width:auto}
    .wy-side-nav-search{width:auto}
    .wy-menu.wy-menu-vertical{width:auto}
    .wy-nav-content-wrap{margin-left:0}
    .wy-nav-content-wrap
    .wy-nav-content{padding:1.618em}
    .wy-nav-content-wrap.shift{position:fixed;min-width:100%;left:85%;top:0;height:100%;overflow:hidden}
}

Change conf.py to add html_css_files option for the custom.css:

html_css_files = ['custom.css']