Fit text horizontally

[bszente]

The notes on large (FullHD) screens are auto-wrapped at 47em leaving a large portion of empty white screen on right side. This is caused by the following line in notes.css:

max-width: 47em;

Please remove this static width limitation and enable fit-to-width behavior.

[elpraga]

Could this be related to #177 ?

[bszente]

I don't know if this is related to your issue. Can you please test, if removing this line from CSS fixes the rendering on Android?

[elpraga]

I just tried that. It didn't fix my problem. Thanks for your help!

[jancborchardt]

Right, on big screens it indeed looks a bit strange as it’s all left-aligned.

The reason we limit the width though is for legibility, see https://en.wikipedia.org/wiki/Line_length

So we should add some CSS with a media query for big screen widths to properly center the content:

#app-content-container {
    text-align: center;
}

.CodeMirror {
    display: inline-block;
    text-align: center;
    margin-right: 125px; /* half of the app-navigation width, to offset a bit to the left so it’s centered related to viewport */
}