Responsive break in https://docs.djangoproject.com/en/1.10/intro/tutorial05/

[pckrishnadas88]

The design breaks in mobile view for the below page. The bottom language & documentation version causes horizontal scroll in this page. I used Google chrome on my Redmi note 3 device.

You can see the pagelink here : ​https://docs.djangoproject.com/en/1.10/intro/tutorial05/

[timgraham]

Is this the only page in the documentation where you see the behavior? Just loading the page and it looks like this? I cannot reproduce the issue on my device.

[pckrishnadas88]

Yes only in this page. You can see this from desktop chrome browser. Click on inspect element and select mobile devices. See the screenshot from the desktop google chrome.

https://drive.google.com/file/d/0B6aIJfXwADFjV1QwdVZmb2w5aUk/view?usp=sharing

[pckrishnadas88]

Found out what was causing the issue. The text was overflowing at two places which are shown in the screenshot. I tried deleting those sections then the issue is fixed. Please have a look at these images.

[raphamendonca]

Hi,

I found the same problem on the Download page.

Appears to be a fixed width in a tag < p > just remove this could work.

[knyghty]

This also happens on some docs pages, e.g. https://docs.djangoproject.com/en/3.0/ref/templates/api/

It's caused here by the long names in the sidebar, e.g. django.contrib.messages.context_processors.messages.

It can be fixed by setting overflow-wrap: break-word somewhere relevant, but this fix isn't beautiful as it doesn't break in very good places. I'm not sure if it's possible to add ­ in those strings somewhere.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[knyghty]

This is still an issue that should be fixed.