how to control maximum displayed width for github.io

41 views
Skip to first unread message

Pete

unread,
Jan 1, 2020, 4:58:37 PM1/1/20
to sphinx-users
This is a proxy request for Sphinx help from Mark Rivers on the EPICS tech-talk mailing list.  He's using Sphinx to build documentation used by EPICS users around the world.  EPICS is used to control lots of interesting projects such as particle accelerators, space telescopes, X-ray sources, and even a home beer factory.

Thanks to Stuart Wilkins much of the EPICS areaDetector documentation has been converted from raw HTML to ReST, using Sphinx to generate Web pages on areadetector.github.io.

 

 

   .wy-table-responsive {

      overflow: visible !important;

   }

} Much of the documentation is in the form of large tables, and I would like those to look as nice as possible.  Stuart created a theme_override.css file that looks like this:

 

/* override table width restrictions */

@media screen and (min-width: 1024px) {

 

   .wy-table-responsive table td {

      /* !important prevents the common CSS stylesheets from overriding

         this as on RTD they are loaded after this stylesheet */

      white-space: normal !important;

   }

 

 

I am having an issue where the tables look good when I build and serve the documents on my local machine, but they do not look as good on github.io.  The problem is the maximum width of the page. 

 

This is what a page looks like when I build and display on my local machine, where it looks OK.  As I increase the width of the browser window the page gets larger up to some width, and then stops changing.  When I change the min-width in the theme_override.css it does not seem to make any difference.

 

 

This is what the same page looks like on areadetector.github.io.  I am displaying it in the same browser session, just a different tab.  Note that the page is much narrower, even though the browser window is the same width.

 

 

 

 

My questions:


  • -          Why is the .rst file being displayed differently on github.io versus my local machine?  Both pages eventually stop growing wider as the browser window width is increased, but that limit is much narrower on github.io than on my local machine.
  • -          Is there a setting I can change to make the page grow wider than the current maximum as the browser window width is increased?

 

Thanks,

Mark

Komiya Takeshi

unread,
Jan 2, 2020, 9:56:56 AM1/2/20
to sphinx...@googlegroups.com
Hi Mark,

How about set html_theme_options['body_max_width']? It seems page width is controlled by the setting.
https://www.sphinx-doc.org/en/master/usage/theming.html#builtin-themes

Thanks,
Takeshi KOMIYA

2020年1月2日(木) 6:58 Pete <prje...@gmail.com>:
--
You received this message because you are subscribed to the Google Groups "sphinx-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sphinx-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/sphinx-users/e62c420a-7398-4d91-8442-80d77995fb83%40googlegroups.com.

Libor Jelinek

unread,
Jan 2, 2020, 11:26:38 AM1/2/20
to sphinx...@googlegroups.com
Are you 100% sure that docs deployed on GitHub Pages are identical with local one? Sphinx produces static HTML/CSS/JS files. Identical files must looks identically no matter from where they are served. My suspect is different CSSes.

Libor

st 1. 1. 2020 v 22:58 odesílatel Pete <prje...@gmail.com> napsal:
--

Mark Rivers

unread,
Jan 2, 2020, 4:05:39 PM1/2/20
to sphinx-users
Hi Takeshi,

Thanks very much, that worked.  When I set that to 1200 the page on github.io is wider (I think it is actually 1170 not 1200).  However, if I try to further increase the body_max_width to 1600 it does not get any wider, it is still 1170.  Is there some other setting that affects that?

Thanks,
Mark
To unsubscribe from this group and stop receiving emails from it, send an email to sphinx...@googlegroups.com.

Mark Rivers

unread,
Jan 2, 2020, 4:10:58 PM1/2/20
to sphinx-users
Hi Libor,

The docs should be the same.  The GitHub pages are built from a Travis job using the docs in the Github repository https://github.com/areaDetector/areaDetector.  My local clone of that repository is up-to-date.  When I run "make" in my local repository I think I should get identical results to Travis and thus the Github pages.  But for some reason on my local build the pages displayed at about 1170px wide, while on GithHub pages I had to set the body_max_width to 1200 to get them to look the same.

Is there some other local setting that could be different?  Both local and Travis are using Sphinx 1.8.5.

Thanks,
Mark
To unsubscribe from this group and stop receiving emails from it, send an email to sphinx...@googlegroups.com.

Komiya Takeshi

unread,
Jan 2, 2020, 6:45:22 PM1/2/20
to sphinx...@googlegroups.com
It seems bootstrap theme also restricts its width to 1170px. So you need to override (or add new media) to widen the screen.

@media (min-width: 1200px)
bootstrap.min.css:11
.container {
    width: 1170px;
}

Thanks,
Takeshi KOMIYA

2020年1月3日(金) 6:05 Mark Rivers <marklr...@gmail.com>:
To unsubscribe from this group and stop receiving emails from it, send an email to sphinx-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/sphinx-users/90847885-3abc-41ad-b41a-897145c759bf%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages