CodeMirror Responsive Design

Question

So I am using CodeMirror to create an iOS Web App that teaches you how to use basic JavaScript and I only just realized that CodeMirror does not automatically resize to fit the screen of the device and the code doesn't fit on the screen... So I realy need to A. Either Make CodeMirror fit on the screen perfectly. Or B. Have a completly custom syntax highlighting textarea that is completly responsive.

Answer 1

What you probably mean by fit on the screen perfectly is the default padding of the body. To remove it:

body, html {
    padding: 0;
    margin: 0;
}

Next I would recommend this viewport:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">

If you want to change the font size you can do so like this:

.CodeMirror {
    font-size: 20px;
}

And if the CodeMirror should be full height:

.CodeMirror {
    height: 100vh;
}

DEMO: https://codepen.io/quic5/pen/maxjmB