Docs: responsive sphinx theme

Issue #4008 new
mixmastamyk created an issue

Hi,

Been trying to read the docs on a mobile device and it is quite difficult because the sidebar takes up most of the viewport. Happens on a narrow desktop window also, when trying to work on code and have docs open at the same time.

A few lines of responsive css could move or hide the sidebar for narrow viewports. Alternatively there are responsive Sphinx themes, like Alabaster.

Thanks for the hard work,

Comments (6)

  1. Mike Bayer repo owner

    shrugs, not much I can do on that front. contributions welcome. I dont think most software library documentation sites are very readable on phones in general, try some others for comparison.

  2. mixmastamyk reporter

    Well, the standard and RTD sphinx themes have been responsive for a few years. I know that this is an older project, and so understand.

    I used phones as an example, and it's true I don't read long-form docs there a lot, but it was easier than explaining about my portrait monitor setup.

    On my phone and desktop however, the font size of the side bar and body text are the same size, so the sidebar is almost half of the viewport, which makes the code samples unreadable without lots of scrolling.

    I'll look into hacking the css a bit and see what I come up with.

  3. mixmastamyk reporter

    Well, I couldn't completely fix the sidebar because there is a script moving it into position. So, I hid it but that is sub optimal. It should come after the text I guess:

    @media only screen and (max-device-width: 736px) and (orientation : portrait) {
    
        #docs-body {
            margin-left: 0;
        }
        #docs-body pre {
            font-size: .9em;  /* still too big */
        }
        #fixed-sidebar {
            display: none;
        }
    }
    

    Then I noticed the readability button, sigh.

  4. Log in to comment