Width of the page in mobile is more than the device width.

[Shreyas Bapat]

See this: https://shreyas-poliastro.readthedocs.io/en/alabaster-theme/
All the image widths are relative. I am unable to understand the cause! Please have a look!

[Shreyas Bapat]

For example, I tried to build the same docs http://docs.pyinvoke.org/en/1.1/
I got this: https://inb.readthedocs.io/en/hi/
And as you can see, the mobile views in both of them is quite different

[Shreyas Bapat]

@bitprophet Should I solve this? I have been successful in doing it locally!

[Jeff Forcier]

Hi, can you provide some screenshots of the specific issue at hand? Not sure exactly what's meant. (Also, the first link up top is a 404 now :() Thanks!

[Shreyas Bapat]

Here are the screenshots!
The default behaviour:

The behaviour after merging that PR:

These two screenshots are for smae documentation on same screen sizes.

[Andrew Spencer]

Another example, from the popular Requests library:

[Waleed Khan]

I encountered this as well when writing my own documentation. It is not specific to images.

The problem appears to come from the base Sphinx styles, possibly these lines:

https://github.com/sphinx-doc/sphinx/blob/0a99a58e12e3546ad1df8265e431db061dfb8666/sphinx/themes/basic/static/basic.css_t#L218-L221

I say this because when I poked around in the inspector, I saw these styles applied to div.body:

/* -- general body styles --------------------------------------------------- */

div.body {
    min-width: 450px;
    max-width: 800px;
}

I worked around the issue by adding these lines to my custom.css:

div.body {
    min-width: auto;
    max-width: auto;
}

Here's a picture before my changes, rendered in a small browser window:

And after:

[Shreyas Bapat]

Exactly @arxanas , and I feel this should be shipped with the theme itself.

[Amir Masoud Abdol]

Any progress with this? I think this should be prioritized. It's such a simple but essential fix.

[real]

I stumbled upon this issue today myself. It seems like on mobile phones I get a horizontal scroll bar. I also worked around this issue with a solution similar to @arxanas's.

One interesting observation: I went to check how it works on https://www.paramiko.org. It seems like the bug is not present there, and I think that I managed to figure out why.

When comparing the css files being loaded into my documentation against the ones loaded into paramiko's documentation, the file basic.css seems to be different. Mine has a copyright of :copyright: Copyright 2007-2020 and paramiko's has an older copyright notice: :copyright: Copyright 2007-2018. There are slight differences between the contents of the basic.css files.

In my basic.css (The newer one), there are the following lines:

div.body {
    min-width: 450px;
    max-width: 800px;
}

Those lines are not present in the older basic.css, used by paramiko.org.

I am not sure where is the basic.css file coming from. The copyright line mentions "the Sphinx team". Maybe this issue doesn't originate from alabaster after all?