Sample code too wide for content area.

[SeanU]

Documentation issue

Summary

The code blocks in the documentation contain many lines that are too wide for the area in which they are being drawn. This means that reading the code samples requires a lot of scrolling side-to-side.

On my 13" MacBook, there is enough room for 72 columns to be visible at once in a maximized Firefox or Safari window. On my 9.4" iPad, there is enough room for 71 columns in portrait mode, and 56 in landscape mode.

Proposed solution

The simplest solution would be to change the pre element's font-size from 1.0em to 0.8em. I believe that 0.8em is still comfortable to read in the fixed-width font. It increases the number of visible columns to 88 characters. Many comments in the code blocks are wider than this, so I would also propose editing them to fit.

Alternatively, if it's left at 1.0em, editing all the sample code blocks to be no more than 72 characters wide would also work.

I also looked into increasing the .documentation__content class's width property to 75%. That also makes enough room for 88 characters on my laptop's browser, but does not seem to improve the situation for tablets.